AngularJSの編集可能なテーブルをダブルクリックして各ラップに対応します

Question

私はAngularjsの新しいラーナーです。既存のコード例を修正し、ダブルクリックして各liを編集したいと思いますが、もう1つ追加すると、期待通りに機能しません。

<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

EDIT：

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それは参考になるかもしれません。