保存前防止模型更新

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

我認為您需要創建模型的副本，以防在調用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 2

首先，您需要在單擊元素以打開模型時保存舊數據，並且在單擊“取消”時需要將舊數據分配回entry對象

Answer 3

您可以使用$rollbackViewValue() 。 ngModelController的角度文檔