All the checkboxes inside a ng-repeat are getting checked when I select just one

Question

I have list of objects named rolePermissionList like this:

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

and I use ng-repeat to repeat checkboxes using the values in that list like this

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

the ng-model of the checkboxes is named idsPermission and it's a list of numbers, those numbers are the IDS of the objects.

When I load the page the checkboxes that are supposed to be checked are checked this part works fine, but when I check another checkbox all the checkboxes gets checked, and when I uncheck a checkbox the same thing happens all the checkboxes gets unchecked.

I use that list of numbers named idsPermission to get all the IDS of the checkboxes that are checked, this worked before I used the directive ng-checked="permission.checked", but now I need to use it since now I need to show the checkboxes that are already marked.

this is my controller

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

The RolService.getListCheckBoxesEditRole(idRole) service returns this 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}]

and what I do in the controller is iterate over that list and check if the marked field is 1 if it's 1 I do this d[permission ].checked = true; I what I think that I do in that line is setting the checked value to true so I could use this directive in the html view ng-checked="permission.checked"

I tried doing this ng-checked="idsPermission[permission.checked]" but when I do this the values that are marked=1 in the JSON that I paste above don't appear checked when I load the page, but if I put it like this ng-checked="permission.checked" they appear marked as they should, but when I click a checkbox all the checkboxes gets selected.

Create a plunker demo that reproduces problem – charlietfl Jun 29 '16 at 20:45 — charlietfl, Jun 29 '16 at 20:45

jbrown · Answer 1 · 2016-06-29T21:08:36.003

I came across too many issues to document but the main problem was how you are iterating through the array that is returned from the service. It should be something like this:

Controller

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

Then you can simplify your html like this:

HTML

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

You can see all of the changes in this working plunk.

score 0 · Answer 2 · answered Jun 29 '16 at 21:08

I can't see in your code that $scope.idsPermission is getting defined. In ng-repeat you only set the key for the object but the value is undefined. That's why the checkbox won't show the correct value.

You could use ng-init to initialize the model. Please have a look at the simplified demo below or this fiddle.

(Also defining the models in your controller would be possible.)

Only using ng-model should be enough for the checkbox to work. I think I've read somewhere that ng-checked and ng-model aren't working smoothly together.

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>

All the checkboxes inside a ng-repeat are getting checked when I select just one

2 Answers2