在 AngularJS 中管理多对多关系

Question

我有两个具有多对多关联的模型——一个角色有很多权限，同样一个权限可能属于多个角色。

现在我有一个允许用户创建新角色的视图；我想为他们添加选择角色具有哪些权限以及创建/删除权限并分配它们的能力。这是我现在正在查看的内容：

示例角色 JSON

现在我将当前分配的权限嵌套在每个角色中：

{
  id: 1,
  name: "Manager",
  permissions: [
    {
      id: 2,
      name: "Send Email"
    }
  ]
}

角色控制：

MyApp.factory('Role', function($resource) {
  var Role = $resource('roles/:id', {id: '@id'}, {});
  return Role;
}).factory('Permission', function($resource) {
  var Permission = $resource('permissions/:id', {id: '@id'}, {});
  return Permission;
});

function RoleCtrl($scope, $routeParams, Role, Permission) {
  $scope.role = Role.get({id: $routeParams.id });
  $scope.permissions = Permission.query();

  $scope.role.save = function() {  
    $scope.role.$update(
      function() { /* success */ }, 
      function(response) { /* errors */ }
    );
  };

  $scope.hasPermission = function(permission) {
    return _.find($scope.role.permissions, function(p) {
      return p.id == permission.id;
    }) !== undefined;
  };
}

查看

<div ng-controller="RoleCtrl">
  <form ng-submit="save()">
    <input type="text" ng-model="role.name">
    <button type="submit">Submit</button>
    <ul>
      <li ng-repeat="permission in permissions">
        <label class="checkbox">
          <input type="checkbox" value="{{permission.name}}" ng-checked="hasPermission(permission)">{{permission.name}}
        </label>
      </li>
      </ul>
  </form>
</div>

到目前为止，我所做的只是正确设置了复选框的初始值，但我感觉我可能会以错误的方式进行处理。我对 Angular 还很陌生，所以我试图找出最好的方法是：

1. 如果复选框更改，请更新与角色关联的权限
2. 在编辑角色时创建新权限或删除权限。

Answer 1

第一部分（现在没有足够的时间考虑第二部分，稍后再回来）：

我会编写一个函数来更新控制器中的权限，该函数是使用 ng-click 绑定的。 该函数接受权限，正在编辑的角色，并添加/删除正在编辑的权限。

function RoleCtrl($scope, $routeParams, Role, Permission) {
    $scope.togglePermission = function(role,permission){
        if($scope.hasPermission(permission){
            // get the index of this permission role
            $scope.role.permissions.splice(index,1);
        }else{
            $scope.role.permissions.push(permission)
        }
    }
}

您的视图可能看起来像这样

  <li ng-repeat="permission in permissions">
    <label class="checkbox" ng-click="togglePermission(role,permission)">
      <input type="checkbox" value="{{permission.name}}" ng-checked="hasPermission(permission)">{{permission.name}}
    </label>
  </li>

Answer 2

我构建了一个 jsfiddle 来演示可能适合您的 Angular 客户端数据结构： https://jsfiddle.net/gavinpalmer1984/cboh22dg/

angular
    .module('rolling', [])
    .directive('rolesDemo', function() {
        return {
            controllerAs: 'demo',
            controller: function() {
                var vm = this;
                vm.roles = {};
                vm.permissions = {};
                vm.createRole = function() {
                    var id = Object.keys(vm.roles).length;
                    var tmp = {};
                    tmp.name = id;
                    tmp.id = id;
                    tmp.permissions = [];
                    vm.roles[id] = tmp;
                    //console.log('create role', vm.roles);
                };
                vm.createPermission = function() {
                    var id = Object.keys(vm.permissions).length;
                    var tmp = {};
                    tmp.name = id;
                    tmp.id = id;
                    tmp.roles = [];
                    vm.permissions[id] = tmp;
                    //console.log('create permission', vm.permissions);
                };
                vm.selectRole = function(id) {
                    vm.selected_role = id;
                }
                vm.selectPermission = function(id) {
                    vm.selected_permission = id;
                }
                vm.changePermission = function(id) {
                    vm.roles[vm.selected_role].permissions = [];
                    angular.forEach(vm.checked[vm.selected_role], function(val, key) {
                        var index = vm.permissions[id].roles.indexOf(vm.selected_role);
                        if (val) {
                            vm.roles[vm.selected_role].permissions.push(key);
                            if (index === -1) {
                                vm.permissions[id].roles.push(vm.selected_role);
                            }
                        } else if (key === id && !val) {
                            if (index !== -1) {
                                vm.permissions[id].roles.splice(index, 1);
                            }
                        }
                    });
                    console.log(vm.permissions[id]);
                };
            },
            template: "".toString() +
                '<button ng-click="demo.createRole()">create role</button><button ng-click="demo.createPermission()">create permission</button>' +
                '<div>' +
                '   roles: <button ng-repeat="role in demo.roles" ng-click="demo.selectRole(role.id)">{{role.name}}</button>' +
                '</div>' +
                '<div>' +
                '   permissions: <button ng-repeat="perm in demo.permissions" ng-click="demo.selectPermission(perm.id)">{{perm.name}}</button>' +
                '</div>' +
                '<div ng-show="demo.selected_role === 0 || demo.selected_role">' +
                '   selected role: {{demo.selected_role}}<br>' +
                '   <div ng-repeat="perm in demo.permissions">' +
                '   <input type="checkbox" value="{{perm.id}}" ng-change="demo.changePermission(perm.id, true)" ng-model="demo.checked[demo.selected_role][perm.id]"/>{{perm.name}}' +
                '   </div>' +
                '</div>' +
                '<div ng-show="demo.selected_permission === 0 || demo.selected_permission">' +
                '   selected permission: {{demo.selected_permission}}<br>' +
                '   <div ng-repeat="role_id in demo.permissions[demo.selected_permission].roles">' +
                '       role {{role_id}}' +
                '   </div>' +
                '</div>'
        };
    });