AngularJS에서 객체의 더티 상태 이전 상태로 돌아 오는 방법

Question

AngularJS에 객체가 더러 워지기 전에 상태를 되돌릴 방법이 있는지 알고 싶습니다.

edit, save 및 cancel 버튼이있는 간단한 사용 사례가 있습니다. 누군가가 편집 버튼을 클릭하고, 문제의 객체 상태를 더럽힌 다음 취소 버튼을 클릭하면 객체의 상태가 이전 상태 (더티가 나기 전의 상태)로 되돌아 가고 싶습니다.

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> 

Answer 1

당신은 사본을 보관해야 원래 거짓말을하고있는 물건, 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; 
}