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

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，它是一个数字列表，这些数字是对象的ID。

当我加载页面时，应该选中的复选框被选中，这部分工作正常，但是当我选中另一个复选框时，所有复选框都被选中，当我取消选中一个复选框时，同样的事情发生了所有复选框都没有选中.

我使用名为 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; 我认为我在该行中所做的是设置选中value 为 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 不能顺利协同工作。

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>