-2

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

以下是表格的 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;
    }


});

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

4

1 回答 1

5

您使用对象的主/副本是正确的。但是您在可编辑行的上下文之外恢复原始值。因此，它不起作用，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

于 2014-12-25T19:27:47.253 回答