Предотвращение обновления модели до сохранения

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

Прежде всего, необходимо сохранить старые данные, когда вы нажимаете на элемент, чтобы открыть модель и когда отменить щелкают вам нужно присвоенные старые данные обратно в entry объекта

Answer 2

Я думаю, что вам нужно создайте копию своей модели, если вам нужно восстановить исходное состояние, когда вызывается cancel. Для того, чтобы сделать копию вашей модели вы делаете копию модели в отдельном объекте 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