我有一个表单，我想根据所选的用户选项选择几个复选框，如admin，hr等。 假设用户选择admin，则应选择所有复选框（包括主选择报告单）。 如果用户选择hr，那么它应该只选择两者的读取选项。 如果技术然后创建，更新和读取两者。等
var app = angular.module('test', []);
app.controller('testCt', function($scope, $http) {});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCt">
<select ng-model="role">
<option value="admin">Admin</option>
<option value="hr">Hr</option>
<option value="marketing">Marketing</option>
<option value="Tech">Tech</option>
</select>
<br/> Report
<input type="checkbox" name="report" ng-model="report" />
<br/>
<div>
Read <input type="checkbox" name="reportrd" ng-model="reportrd" ng-checked="report" />
Create
<input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="report" /> Update
<input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="report" /> Delete
<input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="report" />
</div>
Bills
<input type="checkbox" name="bill" ng-model="bill" />
<br/>
<div>
Read <input type="checkbox" name="billrd" ng-model="billrd" ng-checked="bill" />
Create
<input type="checkbox" name="billcr" ng-model="billcr" ng-checked="bill" /> Update
<input type="checkbox" name="billcr" ng-model="billcr" ng-checked="bill" /> Delete
<input type="checkbox" name="billcr" ng-model="billcr" ng-checked="bill" />
</div>
</div>
如何实现这个目标？
答案 0 :(得分：1)
请看下面的代码段。它仅为管理员选择创建，其余部分留给您，我认为您明白了。
var app = angular.module('test', []);
app.controller('testCt', function($scope, $http) {
$scope.role=null;
$scope.selected={
report: {
read: false,
create: false,
update: false,
delete: false
},
bill: {
read: false,
create: false,
update: false,
delete: false
}
};
$scope.update = function() {
switch($scope.role) {
case "admin":
$scope.selected={
report: {
read: true,
create: true,
update: true,
delete: true
},
bill: {
read: true,
create: true,
update: true,
delete: true
}
};
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCt">
<select ng-model="role" ng-change="update()">
<option value="admin">Admin</option>
<option value="hr">Hr</option>
<option value="marketing">Marketing</option>
<option value="Tech">Tech</option>
</select>
<br/> Report
<input type="checkbox" name="report" ng-model="report" />
<br/>
<div>
Read <input type="checkbox" name="billrd" ng-model="selected.report.read" />
Create
<input type="checkbox" name="billcr" ng-model="selected.report.create" /> Update
<input type="checkbox" name="billup" ng-model="selected.report.update" /> Delete
<input type="checkbox" name="billdl" ng-model="selected.report.delete" />
</div>
Bills
<input type="checkbox" name="bill" ng-model="bill" />
<br/>
<div>
Read <input type="checkbox" name="billrd" ng-model="selected.bill.read" />
Create
<input type="checkbox" name="billcr" ng-model="selected.bill.create" /> Update
<input type="checkbox" name="billup" ng-model="selected.bill.update" /> Delete
<input type="checkbox" name="billdl" ng-model="selected.bill.delete" />
</div>
{{selected}}
</div>
答案 1 :(得分：1)
在这里，我想解决这个问题！我为用户创建了权限地图。类似的东西：
$scope.permissions = {
"admin": ["read", "create", "update", "delete"],
"hr": ["read"],
"tech": ["read", "create", "update"]
}
现在在你的下拉列表的ng-change，我会调用一个函数，在$scope变量中为我提供所选角色。哪个可以在ng-checked中使用，如下所示：
Read <input type="checkbox" name="reportrd" ng-model="reportrd"
ng-checked="selected.includes('read')" />
请注意，旧版浏览器可能不支持Array.includes。在这种情况下使用好的旧indexOf（或填充？）
这是工作片段：
var app = angular.module('test', []);
app.controller('testCt', function($scope, $http) {
$scope.permissions = {
"admin": ["read", "create", "update", "delete"],
"hr": ["read"],
"tech": ["read", "create", "update"]
}
$scope.selectPermissions = function(role) {
if($scope.permissions[role]) {
$scope.selected = $scope.permissions[role]
} else {
$scope.selected = []
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCt">
<select ng-model="role" ng-change="selectPermissions(role)">
<option value="admin">Admin</option>
<option value="hr">Hr</option>
<option value="marketing">Marketing</option>
<option value="tech">Tech</option>
</select>
<br/> Report
<input type="checkbox" name="report" ng-model="report" />
<br/>
<div style="margin-bottom: 20px">
Read <input type="checkbox" name="reportrd" ng-model="reportrd" ng-checked="selected.includes('read')" />
Create<input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="selected.includes('create')" />
Update<input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="selected.includes('update')" />
Delete<input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="selected.includes('delete')" />
</div>
Bills
<input type="checkbox" name="bill" ng-model="bill" />
<br/>
<div>
Read <input type="checkbox" name="billrd" ng-model="billrd" ng-checked="selected.includes('read')" />
Create<input type="checkbox" name="billcr" ng-model="billcr" ng-checked="selected.includes('create')"/>
Update<input type="checkbox" name="billcr" ng-model="billcr" ng-checked="selected.includes('update')"/>
Delete<input type="checkbox" name="billcr" ng-model="billcr" ng-checked="selected.includes('delete')" />
</div>
</div>
答案 2 :(得分：1)
与https://stackoverflow.com/a/42902062/2277954类似，但直接$ scope变量修改，变量名称更新为相对含义。
// Code goes here
var app = angular.module('test', []);
app.controller('testCt', function($scope, $http) {
$scope.availableChecks = [
"report",
"reportrd",
"reportcr",
"reportup",
"reportde",
"bill",
"billrd",
"billcr",
"billup",
"billde",
];
$scope.roles = [{
"name": "Admin",
"value": "admin",
"activate": ["report", "bill"]
}, {
"name": "Hr",
"value": "hr",
"activate": ["report"]
}, {
"name": "Marketing",
"value": "marketing",
"activate": ["reportrd", "billrd"]
}, {
"name": "Tech",
"value": "tech",
"activate": [
"reportrd", "reportup", "reportde",
"billrd", "billup", "billde"
]
}];
$scope.role = "admin";
selChanged();
function resetAll() {
for (var i in $scope.availableChecks) {
var avail = $scope.availableChecks[i];
$scope[avail] = false;
}
}
$scope.selChanged = selChanged;
function selChanged() {
var role = $scope.roles.filter(function(r) {
return r.value === $scope.role;
});
if (role.length > 0) {
role = role[0];
resetAll();
for (var i = 0, len = role.activate.length; i < len; i++) {
$scope[role.activate[i]] = true;
}
}
}
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="test" ng-controller="testCt">
<select ng-model="role" ng-change="selChanged()" ng-options="role.value as role.name for role in roles">
</select>
<br/> Report
<input type="checkbox" name="report" ng-model="report" />
<br/>
<div>
Read <input type="checkbox" name="reportrd" ng-model="reportrd" ng-checked="report" /> Create <input type="checkbox" name="reportcr" ng-model="reportcr" ng-checked="report" /> Update <input type="checkbox" name="reportup" ng-model="reportup" ng-checked="report"
/> Delete <input type="checkbox" name="reportde" ng-model="reportde" ng-checked="report" />
</div>
Bills
<input type="checkbox" name="bill" ng-model="bill" />
<br/>
<div>
Read <input type="checkbox" name="billrd" ng-model="billrd" ng-checked="bill" /> Create <input type="checkbox" name="billcr" ng-model="billcr" ng-checked="bill" /> Update <input type="checkbox" name="billup" ng-model="billup" ng-checked="bill" /> Delete <input type="checkbox" name="billde" ng-model="billde" ng-checked="bill" />
</div>
</div>
</body>
</html>