我去列表视图页面点击编辑任何元素。更改文本框上的内容,然后单击取消。这会导航到列表视图,但即使没有我保存,该条目现在也会更新。
路线
(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
}());
控制
(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>
答案 0 :(得分:3)
我认为您需要创建模型的副本,以防在调用cancel时需要恢复原始状态。要制作模型的副本,请在范围内的单独JS对象中执行模型的副本,如下所示:
$scope.master= angular.copy($scope.entry);
点击取消后,您可以将主对象恢复为模型以放弃更改:
angular.copy($scope.master, $scope.entry);
如果您想查看API参考,请参阅https://docs.angularjs.org/api/ng/function/angular.copy
答案 1 :(得分:0)
首先,当您单击元素以打开模型时需要保存旧数据,单击取消时需要将旧数据分配回entry
对象
答案 2 :(得分:0)
您可以使用$rollbackViewValue()
。 Angular Docs for ngModelController