すべてのチェックボックスのチェックを得ている私はちょうど1

Question

を選択すると、私はこのようなrolePermissionListという名前のオブジェクトのリストを持っている：

[{"id":1,"name":"createUser","type":"user","marked":1},{"id":2,"name":"deleteUser","type":"user","marked":1},{"id":3,"name":"editRole","type":"role","marked":0}] 

と私のようなそのリスト内の値を使用してチェックボックスを繰り返すng-repeatを使用チェックボックスのこの

<div class="form-group"> 
    <label>Role Permissions:</label> 
    <div class="checkbox" ng-repeat="permission in rolePermissionList"> 
     <label> 
      <input type="checkbox" ng-model="idsPermission[permission .idPermission ]" 
       ng-checked="permission.checked">{{permission.name}} 
     </label> 
    </div> 
</div> 

ng-modelがidsPermissionと名付けられ、それが数字のリストだが、これらの数字は、オブジェクトのIDSです。

ページをロードすると、チェックされるはずのチェックボックスがチェックされます。この部分はうまく動作しますが、別のチェックボックスをチェックするとすべてのチェックボックスがオンになり、チェックボックスをオフにすると同じチェックが行われますチェックされていません。

私はディレクティブng-checked="permission.checked"を使用する前に、これが働いチェックされ、チェックボックスのすべてのIDSを、取得するためにidsPermissionという名前の番号のリストを使用しますが、今私はあるチェックボックスを表示する必要があるので、今、私はそれを使用する必要があります既にマークされています。

これは、このJSON [{"id":1,"name":"createUser","type":"user","marked":1},{"id":2,"name":"deleteUser","type":"user","marked":1},{"id":3,"name":"editRole","type":"role","marked":0}]

と私はコントローラで行う、そのリストを反復処理するとマークされたフィールドがあるかどうかを確認されRolService.getListCheckBoxesEditRole（idRole）サービスが返す私のコントローラ

angular.module('MyApp') 
    .controller('RolCtrl', ['$scope', 'RolService', 
     function ($scope, RolService) { 
      $scope.idsPermission = {}; 
      $scope.getListCheckBoxesEditRole = function (idRole) { 

       $scope.selectRol.descripcion; 
       RolService.getListCheckBoxesEditRole(idRole) 
         .then(
           function (d) { 
            var userPermissionList = []; 
            for (var permission in d) { 
             if (d[permission ].type === 'user') { 
              if (d[permission ].marked === 1) 
              { 
               d[permission ].checked = true; 
               userPermissionList.push(d[permission ]); 
              } else { 
               userPermissionList.push(d[permission ]); 
              } 
             } 

            } 
            $scope.rolePermissionList = userPermissionList; 
           }, 
           function (errResponse) { 
            console.error('ERROR'); 
           } 
         ); 
      }; 
     } 
     $scope.getListCheckBoxesEditRole(3); 
    ]); 

です1もしあれば1私はこれを行うd[permission ].checked = true;私はその行で私が考えると、チェックされた値をtrueに設定しているので、この指示文をHTMLビューで使うことができますng-checked="permission.checked"

ng-checked="idsPermission[permission.checked]"これを試してみましたが、これを行うと、上記の貼り付けたJSONの値がmarked=1で、ページを読み込んだときにチェックされていませんでしたが、このように置くとは、チェックボックスをクリックすると、すべてのチェックボックスが選択されます。

Answer 1

私は文書化するには多すぎる問題に遭遇しましたが、主な問題は、サービスから返された配列をどのように反復処理するかということでした。あなたはすべてを見ることができます

HTML

<input type="checkbox" ng-model="permission.checked" /> 

：次に、あなたは、このようにHTMLを簡素化することができます

コントローラ

angular.forEach(d.data, function(permission) { 
     if (permission.type === 'user') { 
     if (permission.marked === 1) { 
      permission.checked = true; 
      userPermissionList.push(permission); 
     } else { 
      userPermissionList.push(permission); 
     } 
     } 
    }); 

：それはこのようなものでなければなりませんこの作業の変更はplunkです。

Answer 2

あなたのコードで$scope.idsPermissionが定義されているのがわかりません。 ng-repeatでは、オブジェクトのキーのみを設定しますが、値はundefinedです。そのため、チェックボックスには正しい値が表示されません。

ng-initを使用してモデルを初期化することができます。以下のシンプルなデモをご覧ください。またはfiddleです。

（また、あなたのコントローラでモデルを定義することは可能であろう。）

チェックボックスが機能するためにのみng-modelを使用して十分なはずです。私はどこかでng-checkedとng-modelがスムーズに動作していないと読んだと思います。

angular.module('demoApp', []) 
 
    .controller('mainCtrl', MainCtrl); 
 

 
function MainCtrl() { 
 
    var vm = this; 
 

 
    angular.extend(vm, { 
 
    data: [{ 
 
     id: 0, 
 
     marked: 1 
 
    }, { 
 
     id: 1, 
 
     marked: 0 
 
    }, { 
 
     id: 2, 
 
     marked: 1 
 
    }] 
 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl"> 
 
    <div ng-repeat="item in ctrl.data"> 
 
    <input type="checkbox" ng-init="ctrl.idPermissions[item.id] = !!item.marked" ng-model="ctrl.idPermissions[item.id]"/>{{item.id}} 
 
    </div> 
 

 
    <pre> 
 
permissions: {{ctrl.idPermissions | json: 2}} 
 
data{{ctrl.data | json: 2}}</pre> 
 

 
</div>