2

次のような 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 です。

ページをロードすると、チェックされているはずのチェックボックスがチェックされますが、この部分は正常に機能しますが、別のチェックボックスをチェックするとすべてのチェックボックスがチェックされ、チェックボックスのチェックを外すとすべてのチェックボックスがチェックされなくなります。

idsPermissionチェックされているチェックボックスのすべての IDS を取得するために名前が付けられた番号のリストを使用しng-checked="permission.checked"ます。

これは私のコントローラーです

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);
    ]);

RolService.getListCheckBoxesEditRole(idRole) サービスは、この 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}]

そして、コントローラーで私がしていることは、そのリストを繰り返し処理し、マークされたフィールドが私がこれを行っているかどうかを確認することです1。見る1d[permission ].checked = true;ng-checked="permission.checked"

私はこれをやってみまし ng-checked="idsPermission[permission.checked]"たが、これを行うと、上に貼り付けたJSONにある値はmarked=1、ページをロードしたときにチェックされていないように見えますが、このように配置すると、本来のようにng-checked="permission.checked"マークされて表示されますが、チェックボックス すべてのチェックボックスが選択されます。

4

2 に答える 2

0

文書化するにはあまりにも多くの問題に遭遇しましたが、主な問題は、サービスから返された配列をどのように反復処理するかでした。次のようになります。

コントローラ

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

次に、次のように html を単純化できます。

HTML

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

この作業中のplunkですべての変更を確認できます。

于 2016-06-29T20:57:57.773 に答える