根据选择下拉用户角色选择复选框

Question

我有一个表单，我想根据所选的用户选项选择几个复选框，如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> 

如何实现这一目标？

Answer 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> 

Answer 2

这就是我想解决这个问题的方法！ 我为用户创建了权限地图。 就像是：

$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 （或polyfill？）

这是工作片段：

 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> 

Answer 3

与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>