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> 

我不知道這背後的原因，雖然。