AngularJs/Bootstrap - リストのバインドチェックボックスが正しく動作しない

Question

権限リストをフィルタリングするロールリストがあります。権限リストには、選択されていることを示すチェックボックスがあります。

各ロールには、関連するアクセス許可のリストがあります。役割が選択されると、使用可能なすべての権限が表示され、権限に関連付けられている権限がチェックされます。各権限のチェックボックスをクリックすると、それを関連付けたり、関連付けを解除したりすることができます。

ただし、selectおよびunselect権限アクションは正しく機能しません。私は問題が何であるか把握できません。誰か助けてくれますか？ありがとう!!!

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> 

に周囲の要素を変更することで固定することができ

でも、私は、この背後にある理由についてはよく分かりません。