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。

当我加载页面时，应检查应该检查的复选框，这部分工作正常，但是当我选中另一个复选框时，所有复选框都会被选中，当我取消选中复选框时，所有复选框都会被取消选中

我使用名为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如果它是1我这样做d[permission ].checked = true;我认为我做的是该行将选中的值设置为true，因此我可以在html视图ng-checked="permission.checked"

中使用此指令

我尝试这样做ng-checked="idsPermission[permission.checked]"但是当我执行此操作时，我加载页面时，上面粘贴的JSON中marked=1的值似乎没有被检查，但是如果我这样做的话这个ng-checked="permission.checked"标记为应该标记，但是当我点击一个复选框时，所有复选框都会被选中。

Answer 1

我遇到了太多要记录的问题，但主要问题是如何迭代从服务返回的数组。它应该是这样的：

<强>控制器

    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。

Answer 2

我无法在您的代码中看到$scope.idsPermission正在定义。在ng-repeat中，您只为对象设置了键，但值为undefined。这就是复选框无法显示正确值的原因。

您可以使用ng-init初始化模型。请查看下面的简化演示或此fiddle。

（也可以在控制器中定义模型。）

只有使用ng-model才能使复选框正常工作。我想我已经在ng-checked和ng-model不能正常工作的地方读到。

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我只选择一个时，会检查ng-repeat中的所有复选框

2 个答案: