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是否是1我这样做d[permission ].checked = true;我认为我在该行中所做的是将选中的值设置为 true，因此我可以在 html 中使用此指令看法ng-checked="permission.checked"

我尝试这样做， ng-checked="idsPermission[permission.checked]"但是当我这样做时，我在上面粘贴的 JSON 中的值marked=1在我加载页面时不会出现检查，但是如果我这样放置，ng-checked="permission.checked"它们会显示为应有的标记，但是当我单击checkbox 所有的复选框都被选中。

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 回答
0

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

您可以使用ng-init来初始化模型。请看下面的简化演示或这个小提琴。

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

只有 usingng-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>

于 2016-06-29T21:08:44.973 回答