-2

この 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その行がまったく触れられていないかのように、以前の状態が表示されるようにします。

"orderBy:'points'"以下は、AngularJS コントローラーのコードです。これは、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）

これが更新されたプランカーです

于 2014-12-25T19:27:47.253 に答える