如何在AngularJS中的对象的脏状态之前返回

时间:2014-12-08 11:17:25

标签: javascript angularjs forms dirty-data

我想知道AngularJS中是否有一种方法可以在对象变脏之前恢复它的状态。

我有一个简单的用例,其中有editsavecancel按钮。如果有人点击编辑按钮,得到有问题的对象的状态为脏,然后单击然后取消按钮,我希望对象的状态回到其先前的状态(它变脏之前的状态)。

当我点击cancel按钮时,即使实际上没有对象,对象的状态也会发生变化。

我可以通过AngularJS提供的某些功能以某种方式实现它吗?

与给定帖子相关的代码:

控制器中的代码:

$scope.uneditedObject = null;
$scope.handleEdit = function(state, index) {
    $scope.uneditedObject = angular.copy($scope.objects[index]);
    $scope.state = state;
    $scope.index = index;
    if(state == 'VIEW') {
        $scope.objects[index] = $scope.uneditedObject
        $scope.uneditedObject = null;
    }
}

HTML代码:

<tr ng-repeat="object in objects">
    <td ng-class="{'editing': $index == index}" >
        {{object.name}}
    </td>
    <td >
        <input type="text" numbers-only class="form-control" ng-model="object.discount" >
    </td>
    <td  ng-class="{'editing': $index == index}" >
        <a class="btn btn-sm red" ng-click="handleEdit('EDIT', $index)" ng-show="state != 'EDIT'">
            Edit
        </a>
        <a class="btn btn-sm blue" ng-show="state == 'EDIT'" ng-show="state != 'EDIT'" ng-click="update(...)">
            Save
        </a>
        <a class="btn btn-sm default" ng-show="state == 'EDIT'" ng-click="handleEdit('VIEW', $index)">
            Cancel
        </a>
    </td>
</tr>

1 个答案:

答案 0 :(得分:2)

您需要保留原始对象的副本,使用angular.copy()

$scope.originalItem=null;
$scope.onEdit = function(item){
   $scope.originalItem = angular.copy(item);
   $scope.item = item;
}

$scope.onEditCancel=function(){
   $scope.item = $scope.originalItem;
   $scope.originalItem=null;
}