根據選擇下拉用戶角色選擇復選框

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>