Comment mettre en œuvre le bouton d'annulation pour la fonctionnalité d'édition dans angularjs

Question

J'ai utilisé le bouton d'édition. après avoir édité j'ai enregistrer et annuler le bouton .save fonctionne comme je m'y attendais mais pas le bouton d'annulation. si je clique sur le bouton d'annulation après avoir essayé de modifier, il devrait montrer le texte précédent. quelqu'un peut-il s'il vous plaît aidez-moi
js violon ici 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

Faites une copie de votre objet que vous souhaitez modifier. Si vous appuyez sur annuler, remplacez l'origine. Voir le 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

L'option la plus rapide est de modifier vos fonctions scope.eidtItem $ et 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/