As a new learner of Angularjs, I found an existing code example and decided to customize it. My goal was to enable double-click editing for each li
item. However, after adding one more li
, the functionality did not work as expected.
<li ng-dblclick="startEditing(item);">
<span ng-hide="item.editing">{{item.name}}</span>
<form ng-submit="doneEditing(item)" ng-show="item.editing">
<input ng-model="item.name" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
</form>
</li>
<li ng-dblclick="startEditing(item);">
<span ng-hide="item.editing">{{item.thing}}</span>
<form ng-submit="doneEditing(item)" ng-show="item.editing">
<input ng-model="item.ting" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
</form>
</li>
I am contemplating whether using startEditing(item.name);
would be a more effective way to target each individual li
.
Is there a simpler method to make the field editable without having to repeatedly paste and modify the following piece of code?
<form ng-submit="doneEditing(item)" ng-show="item.editing">
<input ng-model="item.name" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
</form>