Doppelklick editierbare Tabelle in AngularJS für jede Verpackung

Question

Ich bin Angularjs neuer Lerner. Ich habe ein bestehendes Codebeispiel geändert, möchte jedoch jedes Mal, um es zu bearbeiten, einen Doppelklick ausführen. Sobald ich jedoch einen weiteren Code hinzugefügt habe, funktionieren sie nicht wie erwartet. 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> 

Ich frage mich, ob startEditing(item.name); besser ist es, jeden li

http://jsfiddle.net/d9d3hsku/

Gibt es eine einfache Möglichkeit zu erkennen, das Feld bearbeitbar zu machen, aber nicht wiederholen muß dieses Bit einfügen und ändern

<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 wird jedes Mal ausgelöst, wenn Sie auf Eingabe doppelklicken! weil dieser Linie:

ng-focus="item == editedItem"

und daher ng-blure wird automatisch auf einem anderen

Eingang ausgelöst! So entfernen Sie den Trick:

 <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 ist Jsfiddle for it!

Sie können angular-xeditable als @ Rishab777 beantwortet verwenden.

Answer 2

Sie können versuchen, directive es könnte hilfreich sein.