Question

我有这个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控制器中的代码，只要我在"orderBy:'points'"表达式中没有ng-repeat，它就会起作用，但是不起作用：

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;
    }


});

有人可以帮我理解如何解决这个问题吗？

Answer 1

您使用对象的主/副本是正确的。但是，您可以从可编辑行的上下文中恢复原始值。因此，它不能与orderBy一起使用，因为orderBy会更改索引并最终更新（而不是重置）其他元素。但即使没有＆＃39; orderBy＆＃39;：尝试编辑一行但在另一行上点击取消它也不会起作用。你明白为什么它不起作用吗？

有很多方法可以做到这一点。例如，您的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

如何使用取消按钮返回模型的先前状态

1 个答案: