AngularJs/Bootstrap - 列表中的绑定复选框无法正常工作

Question

我有一个过滤权限列表的角色列表。权限列表有一个复选框，表明它已被选中。

每个角色都有一个相关权限列表。选择角色后，将显示所有可用权限，并检查已与其关联的权限。通过单击每个权限的复选框，您可以关联或取消关联。

但是选择和取消选择权限操作无法正常工作。我不知道是什么问题。有人能帮我吗 ？谢谢！！！

Code in Plunker

页面代码

 <div class="panel-body">
          <div class="form-group">
            <div class="col-md-6">
              <div class="list-group">
                <a ng-click="selectRole(role)" ng-repeat="role in model.roles" class="list-group-item" ng-class="{active: role.id == model.selectedRole.id}">{{role.name}}</a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="list-group">
                <a ng-repeat="permission in model.permissions" class="list-group-item">{{permission.name}}                  <input type="checkbox" class="pull-right" ng-checked="isSelected(permission.id) > -1" ng-click="clickPermission(permission)" ng-class="{active: permission.id == model.selectedPermission.id}" />
                </a>
              </div>
            </div>
          </div>
        </div>

控制器代码

app.controller('PermissionsToRoleController', function($scope) {

  $scope.model = {
    roles: [],
    permissions: [],
    selectedRole: null,
        selectedPermission: null
  };  

  $scope.selectRole = function(role) {
    $scope.model.selectedRole = role;
  }

  var findRoles = function() {
    $scope.model.roles = [{id: 1, name: 'ADMIN', permissions: [{id: 1, name:'MASTER'}] },
                          {id: 2, name: 'USER',  permissions: [] }
                         ];

        $scope.model.permissions = [{id: 1, name: 'MASTER'}];

        $scope.model.selectedRole = $scope.model.roles[0];
  };

  $scope.clickPermission = function(permission) {
    $scope.model.selectedPermission = permission;
    var idx = $scope.isSelected(permission.id);
    if (idx > -1) {
      $scope.model.selectedRole.permissions.splice(idx, 1);
    } else {
      $scope.model.selectedRole.permissions.push(permission);
    }
  };

  $scope.isSelected = function(permissionId) {
    for (var i = 0; i < $scope.model.selectedRole.permissions.length ; i++) {
      if ($scope.model.selectedRole.permissions[i].id === permissionId) {
              return i;
      }
    }
    return -1;
  }

  findRoles();

});

Answer 1

我发现的问题是复选框，虽然功能正常，但单击它时显示不会“取消选中”。

这可以通过将周围元素更改为span 而不是a 来解决

<span ng-repeat="permission in model.permissions" class="list-group-item">{{permission.name}}                  
    <input type="checkbox" class="pull-right" ng-checked="isSelected(permission.id) > -1" ng-click="clickPermission(permission)" ng-class="{active: permission.id == model.selectedPermission.id}" />
</span>

不过，我不确定这背后的原因。