angularjs select all checkbox function

Question

I'm fairly new to angular and have a select all checkbox that checks all the boxes through ng-model/ng-checked.

    <th>
        <input type="checkbox" id="selectAll" ng-model="selectAll"/>
    </th>
    <th>
        ${Case Number}
    </th>
    <tr ng-repeat="item in c.onbCase>
        <td><input type="checkbox" name="checkbox" ng-click="checkboxFunc(item)"
                   ng-model="item.checked"
                   ng-checked="selectAll || item.checked"/>
        </td>
        <td>{{item.number}}</td>
    </tr>

I also have a function called checkboxFunc that sets item.selected to true if checked and throws the case number into an array:

$scope.onbNum = [];

    $scope.checkboxFunc =  function(item){
        if(item.selected == false) {
            if($scope.onbNum.indexOf(item.number)==-1){
                $scope.onbNum.push(
                    item.number
                )
            }
            item.selected = true;
        } else {
            if($scope.onbNum.indexOf(item.number)!==-1){
                var pos = $scope.onbNum.indexOf(item.number);
                $scope.onbNum.splice(pos,1)
            }
            item.selected = false;
        }
    }

While the Select All checkbox checks all the boxes when clicked upon, how do I fix my function so that all the case numbers get thrown into the array?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Don't use ng-checked and ng-model together on the same element.

From the Docs:

Note that [the ng-checked] directive should not be used together with ngModel, as this can lead to unexpected behavior.

— AngularJS ng-checked Directive API Reference

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 7, 2017 at 12:24

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas2612 · Accepted Answer · 2017-10-07 11:20:24Z

0

If you are using item.checked just to ensure which check box is checked then you can do something like this :

$scope.onbCase = [
  { number:1, selected:false },
  { number:2, selected:false },
  { number:3, selected:false }
  ];

Here is your functions :

  $scope.onbNum = [];
  $scope.checkAll =  function(){
        $scope.onbNum = [];
        for(var i=0; i<$scope.onbCase.length;i++){
          $scope.onbCase[i].selected = $scope.selectAll;
        }
        if($scope.selectAll === true){
            for(var i=0; i<$scope.onbCase.length;i++){
              $scope.onbNum.push($scope.onbCase[i].number);
            }
        }
  }

$scope.checkboxFunc =  function(item){
  if(item.selected) {
        if($scope.onbNum.indexOf(item.number)===-1){
            $scope.onbNum.push(
                item.number
            )
        }
    }
    else {
      var pos = $scope.onbNum.indexOf(item.number);
        if(pos>-1){
            $scope.onbNum.splice(pos,1);
        }
        $scope.selectAll = false;
    }
}

Here is your HTML Page :

    <th>
        <input type="checkbox" id="selectAll" ng-model="selectAll"
           ng-click="checkAll()"/>
    </th>
    <th>    ${Case Number}
    </th>     

    <tr ng-repeat="item in onbCase">
        <td><input type="checkbox" name="checkbox" 
          ng-click="checkboxFunc(item)" ng-model="item.selected" 
          ng-checked="selectAll || item.selected"/>
        </td>
        <td>{{item.number}}</td>
    </tr>

Hope this will work or give you a idea for what you want.

answered Oct 7, 2017 at 11:20

Vikas2612

364 bronze badges

2 Comments

georgeawg Over a year ago

The AngularJS team says that the ng-checked directive should not be used together with ngModel, as this can lead to unexpected behavior.

Vikas2612 Over a year ago

I am still learning so didn't know this. Thanks, now I have some more things to read and learn.

Mozhdeh.Hamidi · Accepted Answer · 2017-10-07 13:33:17Z

0

I'm not sure to exactly know your question , but I hope my answer help you: add ng-click to your selectAll input like below:

<input type="checkbox" id="selectAll" ng-model="selectAll" ng-change="checkAll()" />

and also add below function to you controller:

    $scope.checkAll = function () {
    if ($scope.selectAll == true) {
        angular.forEach($scope.c.onbCase, function(item) {
            if ($scope.onbNum.indexOf(item.number) == -1) {
                $scope.onbNum.push(
                    item.number
                );
            }
        });
    } else {
        angular.forEach($scope.c.onbCase, function (item) {
            if ($scope.onbNum.indexOf(item.number) !== -1) {
                var pos = $scope.onbNum.indexOf(item.number);
                $scope.onbNum.splice(pos, 1);
            }
        });
    }

}

edited Oct 7, 2017 at 13:33

answered Oct 7, 2017 at 7:10

Mozhdeh.Hamidi

615 bronze badges

1 Comment

georgeawg Over a year ago

Use the ng-change directive instead of ng-click. It properly pipelines from the click handler added by the ngModelController.

Collectives™ on Stack Overflow

angularjs select all checkbox function

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related