Asp.net mvc 4 在ASP.NET MVC 4中使用AngularJS检测更改
我有一个现有的MVC4应用程序,其中有多组复选框,我需要检测用户何时进行了更改,即选中或取消选中复选框。如果用户进行了更改,并且他们试图离开页面,我需要提示他们保存更改。我只是在学习AngularJS,但我想我可以用它来检测复选框状态何时发生变化,也可以用AngularJS中的路由来检测用户何时离开页面 我的代码基于答案。由于视图已经由MVC呈现,我不能使用REST服务和angular来填充模型和视图 视图中呈现的HTMLAsp.net mvc 4 在ASP.NET MVC 4中使用AngularJS检测更改,asp.net-mvc-4,angularjs,angularjs-scope,Asp.net Mvc 4,Angularjs,Angularjs Scope,我有一个现有的MVC4应用程序,其中有多组复选框,我需要检测用户何时进行了更改,即选中或取消选中复选框。如果用户进行了更改,并且他们试图离开页面,我需要提示他们保存更改。我只是在学习AngularJS,但我想我可以用它来检测复选框状态何时发生变化,也可以用AngularJS中的路由来检测用户何时离开页面 我的代码基于答案。由于视图已经由MVC呈现,我不能使用REST服务和angular来填充模型和视图 视图中呈现的HTML <div id="userPermissions" class="
<div id="userPermissions" class="userWrapper" ng-app="myApp.User">
<div id="actionCategories" class="section" ng-controller="UserCtrl">
<div class="actionGroupBody">
<div class="actionGroupAction">
<input type="checkbox" value="Create new users"
id="action-f9ae022b-5a53-4824-8a79-f7bbac844b11"
data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"
ng-checked="isSelected('f9ae022b-5a53-4824-8a79-f7bbac844b11')"
ng-click="updateSelection($event,'f9ae022b-5a53-4824-8a79-f7bbac844b11')"/>Create new users
</div>
<div class="actionGroupAction">
<input type="checkbox" value="Edit users"
id="action-5525d5e7-e1dd-4ec3-9b1d-3be406d0338b"
data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"
ng-checked="isSelected('5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"
ng-click="updateSelection($event,'5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"/>Edit users
</div>
<div class="actionGroupAction">
<input type="checkbox" value="Edit personal account"
id="action-9967c1c2-c781-432b-96df-224da760bfb6"
data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"
ng-checked="isSelected('9967c1c2-c781-432b-96df-224da760bfb6')"
ng-click="updateSelection($event,'9967c1c2-c781-432b-96df-224da760bfb6')"/>Edit personal account
</div>
</div>
<div class="caption">
<label class="actionGroupCaption">Store</label> <span class="actionCategorySelectAll"><input type="checkbox" value="select all Store" id="7bace6c1-4820-46c2-b463-3dad026991f2" data-action-category="selectall"/>All</span>
</div>
<div class="actionGroupBody">
<div class="actionGroupAction">
<input type="checkbox" value="Access home page"
id="action-fba7e381-4ed8-47ce-8e85-b5133c9ba9f7"
data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"
ng-checked="isSelected('fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"
ng-click="updateSelection($event,'fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"/>Access home page
</div>
<div class="actionGroupAction">
<input type="checkbox" value="Edit settings"
id="action-2d02b77b-14a4-4136-a09f-fd51eecd2dbe"
data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"
ng-checked="isSelected('2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"
ng-click="updateSelection($event,'2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"/>Edit settings
</div>
<div class="actionGroupAction">
<input type="checkbox" value="Edit products"
id="action-f42f933c-a2b8-42e8-af4b-d52f90f58ddb"
data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"
ng-checked="isSelected('f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"
ng-click="updateSelection($event,'f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"/>Edit products
</div>
<div class="actionGroupAction">
<input type="checkbox" value="Edit orders"
id="action-92ed258b-c954-46e4-b5c9-a89fdb5c54d9"
data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"
ng-checked="isSelected('92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"
ng-click="updateSelection($event,'92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"/>Edit orders
</div>
</div>
</div>
</div>
创建新用户
编辑用户
编辑个人帐户
全部存储
访问主页
编辑设置
编辑产品
编辑订单
这是角度代码
var app = angular.module('myApp.User', []);
app.controller('UserCtrl', function ($scope) {
$scope.entities = [{ //how to populate with checkboxes state from view? factory maybe similar to below??? // }];
$scope.selected = [];
var updateSelected = function (action, id) {
if (action == 'add' & $scope.selected.indexOf(id) == -1)
$scope.selected.push(id);
if (action == 'remove' && $scope.selected.indexOf(id) != -1)
$scope.selected.splice($scope.selected.indexOf(id), 1);
};
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id);
};
$scope.selectAll = function ($event) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
for (var i = 0; i < $scope.entities.length; i++) {
var entity = $scope.entities[i];
updateSelected(action, entity.id);
}
};
$scope.getSelectedClass = function (entity) {
return $scope.isSelected(entity.id) ? 'selected' : '';
};
$scope.isSelected = function (id) {
return $scope.selected.indexOf(id) >= 0;
};
$scope.isSelectedAll = function () {
return $scope.selected.length === $scope.entities.length;
};
});
app.factory('UserDataService', function () {
var service = {}
service.getData = function () {
var actions = $("input[id^=action-]");
return actions;
}
return service;
});
var-app=angular.module('myApp.User',[]);
app.controller('UserCtrl',函数($scope){
$scope.entities=[{//如何从视图中填充复选框状态?工厂可能与下面类似???//}];
$scope.selected=[];
var updateSelected=函数(操作,id){
if(action='add'&$scope.selected.indexOf(id)=-1)
$scope.selected.push(id);
if(action='remove'&&$scope.selected.indexOf(id)!=-1)
$scope.selected.splice($scope.selected.indexOf(id),1);
};
$scope.updateSelection=函数($event,id){
var复选框=$event.target;
var action=(checkbox.checked?'add':'remove');
updateSelected(操作,id);
};
$scope.selectAll=函数($event){
var复选框=$event.target;
var action=(checkbox.checked?'add':'remove');
对于(变量i=0;i<$scope.entities.length;i++){
var entity=$scope.entities[i];
updateSelected(action,entity.id);
}
};
$scope.getSelectedClass=函数(实体){
返回$scope.isSelected(entity.id)?“selected”:“”;
};
$scope.isSelected=函数(id){
返回$scope.selected.indexOf(id)>=0;
};
$scope.isSelectedAll=函数(){
返回$scope.selected.length==$scope.entities.length;
};
});
app.factory('UserDataService',函数(){
var服务={}
service.getData=函数(){
var actions=$(“输入[id^=action-]”);
返回动作;
}
回程服务;
});
每当我单击复选框时,$scope函数(.updateSelection、.isSelected等)都不存在在控制器中点火。ng app='myApp.User'的声明在哪里?上面的HTML在一个DIV中,如下所示:由于空间原因,我不想将整个视图放在问题中。请查看上面的更改查看浏览器控制台以了解错误。如果您不能理解这些错误,请使用您得到的错误更新问题。我最初忘记将GUID括在单引号中,但在更正后,我在控制台中没有看到任何错误。我更新了问题。在控制器帮助中使用factory服务填充模型会有帮助吗?