Question

我是Angularjs的新学习者。我修改了一个现有的代码示例，想要双击来编辑每个li，但是，一旦我再添加一个，它们将无法正常工作。

<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>

我想知道startEditing(item.name);是否更好地检测每个li

http://jsfiddle.net/d9d3hsku/

是否有一种简单的方法可以使字段可编辑，但不需要重复粘贴和修改此位

<form ng-submit="doneEditing(item)" ng-show="item.editing">
              <input ng-model="item.name" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
</form>

Answer 1

修改

每次双击输入时都会触发
ng-focus！因为这一行：

ng-focus="item == editedItem"

因此ng-blure会在另一个
上自动触发
输入！所以删除它将起到作用：

<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)"> </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.thing" ng-blur="doneEditing(item)" > </form> </li>

Here是Jsfiddle！

您可以使用angular-xeditable作为@ Rishab777回答。

Answer 2

你可以尝试这个directive它可能会有所帮助。

双击AngularJS中的可编辑表格进行每次换行

2 个答案: