CODEWITHSUNDEEP
javascriptangularjs
xrcwrn
xrcwrn

Reputation: 5327

Selecting checkbox based on selecting dropdown user role

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?

Upvotes: 1

Views: 462

Answers (3)

Matteo Gaggiano
Matteo Gaggiano

Reputation: 1305

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>

Upvotes: 1

tanmay
tanmay

Reputation: 7911

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>

Upvotes: 1

niklas
niklas

Reputation: 3011

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>

Upvotes: 1

Related Questions