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（或填充？）

这是工作片段：

＆＃13;

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 = []
               }
             }
           });

＆＃13;

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

＆＃13;

Answer 3

与https://stackoverflow.com/a/42902062/2277954类似，但直接$ scope变量修改，变量名称更新为相对含义。

＆＃13;

// 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;
      }

    }
  }


});

＆＃13;

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

＆＃13;

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

3 个答案: