如何在angularjs中實現編輯功能的取消按鈕

Question

我已經使用編輯按鈕。編輯後我有保存並取消按鈕.save按鈕正在工作，因爲我的預期，但不是取消按鈕。 如果我在嘗試編輯後單擊取消按鈕，它應顯示以前的文本。任何人都可以請幫我在這裏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功能。

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