CODEWITHSUNDEEP
javascriptangularjsfunctioncheckbox
Dave
Dave

Reputation: 1277

angularjs select all checkbox function

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?

Upvotes: 0

Views: 718

Answers (3)

Mozhdeh.Hamidi
Mozhdeh.Hamidi

Reputation: 61

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

}

Upvotes: 0

georgeawg
georgeawg

Reputation: 48948

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

Upvotes: 1

Vikas2612
Vikas2612

Reputation: 36

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.

Upvotes: 0

Related Questions