Selecting checkbox based on selecting dropdown user role

Question

I have a form where I want to select few checkbox based on selected user option like admin,hr etc. Suppose if user select admin it should select all checkboxes(including main select report bill). If user select hr then it should select only read option of both. if tech then create,update and read of both. etc

  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> 

How to achive this?

Answer 1

Look at the below snippet. It is only created for the admin select, the rest is left to you, I think that you get the point.

  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

Here's how I would like to solve this! I created a map of permissions for users. Something like:

$scope.permissions = {
    "admin": ["read", "create", "update", "delete"],
    "hr": ["read"],
    "tech": ["read", "create", "update"]
}

Now on ng-change of your dropdown, I would call a function that gives me selected role in a $scope variable. Which can be used in ng-checked like this:

Read <input type="checkbox" name="reportrd" ng-model="reportrd" 
         ng-checked="selected.includes('read')" />

Note that Array.includes might not be supported in older browsers. Use good old indexOf in that case (or a polyfill?)

Here's the working snippet:

 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

Similar to https://stackoverflow.com/a/42902062/2277954 but with direct $scope variable modification with variable name updated to relative meaning.

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