저장하기 전에 모델 업데이트를 방지합니다.

Question

목록보기 페이지로 이동합니다. 요소 편집을 클릭하십시오. 텍스트 상자의 내용을 변경하고 취소를 클릭하십시오. 이렇게하면 목록보기로 이동하지만 저장하지 않아도 항목이 업데이트됩니다.

경로

(function() { 
    'use strict'; 

    angular.module('myApp.Group', ['ngRoute']) 
     .config(['$routeProvider', function ($routeProvider, $rxStatusTagsProvider) { 
      $routeProvider.when('/group/list', { 
       templateUrl: 'group/templates/list_view.html', 
       controller: "GroupListCtrl" 
      }); 
      $routeProvider.when('/group/edit/:id', { 
       templateUrl: 'group/templates/edit.html', 
       controller: "GroupEditCtrl" 
      }); 
     }]); 

    //http://localhost:5000/groups/list 
}()); 

Ctrl 키

(function() { 
    "use strict"; 
    angular.module('myApp.Group') 
     .controller("GroupListCtrl", function ($scope, GroupService) { 
      $scope.groups = GroupService.list(); 
     }) 
     .controller("GroupEditCtrl", function ($scope, $routeParams, $location, GroupService) { 
      var id = $routeParams.id; 

      $scope.id = id; 
      $scope.entry = GroupService.get(id); 

      $scope.save = function (entry) { 
       GroupService.save(entry); 
       $location.path('/group/list'); 
      }; 

     }) 

}()); 

서비스

(function() { 
    "use strict"; 
    angular.module('myApp.Group') 
     .service('GroupService', function ($http, $location, $rootScope) { 

      var uid = 1, 
       listData = [ 
        {"id": 1, "name": "System Admins", "description": "Lorem ipsuem"}, 
        {"id": 2, "name": "OS Admin",  "description": "Lorem ipsuem"} 
       ]; 

      this.get = function (id) { 
       return listData[id - 1]; 
      }; 
     }); 
}()); 

편집 tmpl

<form method="post" ng-submit="groupForm.$valid && save(group)" name="groupForm" novalidate> 
    <rx-form-fieldset> 
     <rx-form-item label="Name"> 
      <input type="text" ng-model="entry.name" name="groupName" required autofocus ng-minlength="3" ng-maxlength="30"/> 
      <div ng-show="groupForm.groupName.$dirty && groupForm.groupName.$invalid"> 
       <span class="error" ng-show="groupForm.groupName.$error.required">Required!</span> 
       <span class="error" ng-show="groupForm.groupName.$error.minlength">Too short!</span> 
       <span class="error" ng-show="groupForm.groupName.$error.maxlength">Too long!</span> 
      </div> 
     </rx-form-item> 
     <rx-form-item label="Description"> 
      <textarea rows="10" cols="30" ng-model="entry.description" name="groupDescription" required ></textarea> 
      <div ng-show="groupForm.groupDescription.$dirty && groupForm.groupDescription.$invalid"> 
       <span class="error" ng-show="groupForm.groupDescription.$error.required">Required!</span> 
      </div> 
     </rx-form-item> 
     <rx-button toggle-msg="Loading..." default-msg="Save" type="submit" ></rx-button> 
     <rx-button ng-controller="redirectCtrl" default-msg="Cancel" ng-click="back('group/list')"></rx-button> 
    </rx-form-fieldset> 
</form> 

Answer 1

먼저 당신은 당신이 요소를 클릭하면 모델을 열려면 오래된 데이터를 저장해야하고 클릭 취소 할 때

Answer 2

난 당신이 필요하다고 생각 다시 entry 객체에 할당 된 데이터에 필요 취소가 호출 될 때 원래 상태로 복원해야 할 경우에 대비해 모델 복사본을 만듭니다. 당신은 다음과 같은 범위에서 별도의 JS 객체 모델의 사본을 모델의 사본을 만들려면

$scope.master= angular.copy($scope.entry); 

당신이 변경 사항을 취소 모델로 마스터 개체를 복원 할 수 있습니다 클릭 취소하면 :

경우

angular.copy($scope.master, $scope.entry); 

당신은 여기 API 레퍼런스를 보면 당신은 https://docs.angularjs.org/api/ng/function/angular.copy

Answer 3

당신은 $rollbackViewValue()을 사용할 수있는 것이 있습니다 싶습니다. Angular Docs for ngModelController