Edit feature attributes in leaflet

Question

I would like to allow a user edit feature attributes when clicking on a feature. I know ArcGIS JS API has a very nice implementation for it, but I can't use ArcGIS JS, because my features are created from a geojson. At this point the only thing I have is this bindPopup window, which I would like to extend such that a user can actually select an attribute and edit it.

I have seen this post, but have no idea how to apply it to my case. Googling also did not help unfortunately.

Here is my script with a simple popup. Any help will be highly appreciated.

<script>
  var map = L.map('map').setView([52.52,13.384], 13);
  L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png').addTo(map);

  function onEachFeature(feature, layer) {
  if (feature.properties) {
      layer.bindPopup("<b>" + feature.properties.linkstr + "</b> has flow " + feature.properties.flow + ".");
    }
  }

  var streets = new L.geoJson(arcs, {
      onEachFeature: onEachFeature
  }).addTo(map);
</script>

Answer 1

Here's a very simple and crude example which hopefully will point you in the right direction. In the onEachFeature function you have direct access to the feature so you can edit it:

function onEachFeature (feature, layer) {
    // Create an input
    var input = L.DomUtil.create('input', 'my-input');
    // Set a feature property as value
    input.value = feature.properties.name;
    // Add a listener to watch for change on input
    L.DomEvent.addListener(input, 'change', function () {
        // Input changed, change property value
        feature.properties.name = input.value;
    });
    // Bind popup to layer with input
    layer.bindPopup(input);
}

Here's an example on Plunker: http://plnkr.co/edit/VzUfSD?p=preview