anglejsの編集機能の取り消しボタンを実装する方法

Question

私は編集ボタンを使用しました。編集した後、私は保存ボタンとキャンセルボタンがありません。 編集した後にキャンセルボタンをクリックすると、前のテキストが表示されます。誰もがここにhttp://jsfiddle.net/F7K63/143/

<tr ng-repeat="item in items"> 
     <td> 
      <span ng-hide="item.editing">{{item.name}} <button ng-click="editItem(item)">Edit</button></span> 
      <input ng-show="item.editing" ng-model="item.name" autofocus /> 
      <button ng-show="item.editing" ng-click="doneEditing(item)">Save</button> 
      <button ng-show="item.editing" ng-click="Cancel(item)">Cancel</button> 
     </td> 
    </tr> 

Answer 1

編集したいあなたのオブジェクトのコピーを作成します。キャンセルを押すと原点が交換されます。 fiddle

$scope.editItem = function (item) { 
    item.editing = true; 
    item.backupName = angular.copy(item.name); 
} 

$scope.doneEditing = function (item) { 
    item.editing = false; 
    delete item.backupName; 
    //do some background ajax calling for persistence... 
}; 
$scope.Cancel = function (item) { 
    item.editing = false; 
    item.name = angular.copy(item.backupName); 
    delete item.backupName; 
}; 

Answer 2

最速のオプションは、あなたの$ scope.eidtItemと$ scope.Cancel機能を編集することです
のjsフィドル私を助けてくださいすることができます。

$scope.editItem = function (item) { 
    item.editing = true; 
    item.oldName = item.name; 
} 

...

$scope.Cancel = function (item) { 
    item.editing = false; 
    item.name = item.oldName; 
}; 

http://jsfiddle.net/F7K63/147/