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

Question

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

ski*_*kip -2 html-table edit dirty-data angularjs angularjs-ng-repeat

我在这里有这个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>

Run Code Online (Sandbox Code Playgroud)

我希望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;
    }


});

Run Code Online (Sandbox Code Playgroud)

有人可以帮我理解如何解决它？

Answer 1

New*_*Dev 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";
}

Run Code Online (Sandbox Code Playgroud)

(注意你不需要index)

这是你更新的plunker

归档时间：	10 年，8 月前
查看次数：	2162 次
最近记录：	8 年，2 月前