Cách triển khai nút hủy để chỉnh sửa chức năng trong angularjs

Question

tôi đã sử dụng nút chỉnh sửa. sau khi chỉnh sửa tôi có nút lưu và hủy nút .save đang hoạt động như tôi mong đợi nhưng không phải nút hủy. nếu tôi nhấp vào nút hủy sau khi cố chỉnh sửa, nó sẽ hiển thị văn bản trước đó. bất cứ ai có thể vui lòng giúp tôi
js fiddle đây 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

Tạo một bản sao của đối tượng của bạn, bạn muốn chỉnh sửa. Nếu bạn nhấn hủy thay thế gốc. Xem 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

Các tùy chọn nhanh nhất là để chỉnh sửa các chức năng $ scope.eidtItem và $ scope.Cancel của bạn.

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