如何使用取消按钮回到模型的先前状态使其变脏答案

【问题标题】：How to get back to previous state of a model making it dirty using cancel button如何使用取消按钮回到模型的先前状态使其变脏
【发布时间】：2015-02-23 07:28:16
【问题描述】：

我有这个 plunkr here，它显示了一个可编辑的表格。

以下是表格的 HTML 代码：

  <body ng-controller="MainCtrl">
    <table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Is enabled?</th>        
    <th>Points</th>
  </tr>
  <tr ng-repeat="fooObject in fooObjects | orderBy:'points'">
    <td><input ng-model="fooObject.name" ng-disabled="fooState!='EDIT'"/></td>
    <td><input ng-model="fooObject.isEnabled" ng-disabled="fooState!='EDIT'"/></td>     
    <td><input ng-model="fooObject.points" ng-disabled="fooState!='EDIT'"/></td>
    <td>
      <a href="#" ng-click="handleEdit(fooObject, 'EDIT', $index)">Edit</a>
      <a href="#" ng-click="handleEditCancel(fooObject, 'VIEW', $index)">Cancel</a>
    </td>
  </tr>
</table>
  </body>

我希望行中的Cancel 链接显示fooObject 的先前状态，就好像该行从未被触及一样。

以下是 AngularJS 控制器中的代码，只要我在 ng-repeat 表达式中没有 "orderBy:'points'"，它似乎就可以工作，但在其他情况下不起作用：

app.controller('MainCtrl', function($scope) {
  $scope.fooObjects = [
    {"name": "mariofoo", "points": 65, "isEnabled": true}, 
    {"name": "supermanfoo", "points": 47, "isEnabled": false}, 
    {"name": "monsterfoo", "points": 85, "isEnabled": true}
    ];

    $scope.fooState = 'VIEW';

    $scope.originalFooObject = null;
    $scope.handleEdit = function(fooObject, fooState, index){
       $scope.originalFooObject = angular.copy(fooObject);
       $scope.fooObject = fooObject;
       $scope.fooState = fooState;
    }

    $scope.handleEditCancel=function(fooObject, fooState, index){
      $scope.fooObjects[index] = $scope.originalFooObject;
       $scope.originalFooObject=null;
       $scope.fooState = fooState;
    }


});

有人可以帮助我了解如何解决它吗？

【问题讨论】：

这个问题没有显示任何研究工作；不清楚还是没用？真的吗？请指导我通过一个有用的链接，因为我找不到任何解决给定问题的链接。请告诉我问题中没有理解什么？谢谢。
我想人们会对你的最后一句话做出反应。通常好的问题会显示一些努力和具体问题。您在 plunker 中有一些内容，但您应该带上相关部分并将其发布在问题本身中。
@NewDev：是的，这可能是问题所在。我实际上认为这样可以节省解决问题的时间。我已经更新了帖子。谢谢。
有一个 plunker 总是好的 - 但问题应该始终独立存在。它还迫使您为您的问题创建一个可重现的最小示例。
无论如何，特别是关于你的问题 - 你想每行“保存”/“取消”吗？ “保存”的触发器是什么？

标签： angularjs html-table angularjs-ng-repeat edit dirty-data

【解决方案1】：

您使用对象的主/副本是正确的。但是您在可编辑行的上下文之外恢复原始值。因此，它不适用于orderBy，因为 orderBy 更改了索引，您最终会更新（而不是重置）不同的元素。但即使没有“orderBy”，它也无法工作：尝试编辑一行但在另一行上点击取消。你明白为什么它不起作用了吗？

有很多方法可以做到这一点。例如，您的fooObjects 可以包含正在编辑的每一行的副本：

$scope.handleEdit = function(fooObject){
  fooObject.$original = fooObject.$original || angular.copy(fooObject);
  $scope.fooState = "EDIT";
}

$scope.handleEditCancel = function(fooObject){
   angular.copy(fooObject.$original, fooObject);
   $scope.fooState = "VIEW";
}

（注意你不需要index）

这是您更新后的plunker

【讨论】：

你绝对做到了。谢谢:)