I am new AngularJS. I am trying select all checkboxes with single checkbox and also execute checkboxClick method. because we setting values to scope. How to do that?

<input class="check-box" data-val="true" type="checkbox">Select All </input>
          <table class="table table-bordered">
                   <tr>
                       <th></th>
                       <th>Printed</th>
                       <th>First Name</th>
                       <th>Last Name</th>
                       <th>Company</th>
                       <th>City</th>
                       <th>Country</th>
                     </tr>
                     <tr ng-repeat="item in items">
                        <td>
                           <input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)">
                          </td>
                          <td>
                          {{item.printed}}
                          </td>
                          ....
                          ....
                      </tr>
                   </table>

JS

 $scope.checkboxClick = function (eventobj, item) {
        if (eventobj.target.checked) {
            $scope.selectedItems.push(item);
            $scope.getLabel(item.id);
            $scope.getOrderItems(item.id);
            $scope.getPaymentItems(item.id);
        } else {
            $scope.removeItemFromSelection(item);
        };
    };

I am new AngularJS. I am trying select all checkboxes with single checkbox and also execute checkboxClick method. because we setting values to scope. How to do that?

<input class="check-box" data-val="true" type="checkbox">Select All </input>
          <table class="table table-bordered">
                   <tr>
                       <th></th>
                       <th>Printed</th>
                       <th>First Name</th>
                       <th>Last Name</th>
                       <th>Company</th>
                       <th>City</th>
                       <th>Country</th>
                     </tr>
                     <tr ng-repeat="item in items">
                        <td>
                           <input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)">
                          </td>
                          <td>
                          {{item.printed}}
                          </td>
                          ....
                          ....
                      </tr>
                   </table>

JS

 $scope.checkboxClick = function (eventobj, item) {
        if (eventobj.target.checked) {
            $scope.selectedItems.push(item);
            $scope.getLabel(item.id);
            $scope.getOrderItems(item.id);
            $scope.getPaymentItems(item.id);
        } else {
            $scope.removeItemFromSelection(item);
        };
    };

• javascript
• angularjs
• checkbox

Share Improve this question Follow asked Jun 10, 2015 at 21:19 James123James123 11.7k7070 gold badges198198 silver badges355355 bronze badges 2

• Take look on this jsfiddle. – arman1991 Commented Jun 10, 2015 at 22:28
• Possible duplicate of Select All Checkbox in AngularJS – Mate Mrše Commented Mar 26, 2019 at 7:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You want a function that is launched with the ng-click event on the checkbox. This will also unselect all checkbox too. It iterates through all items, changing the state of each.

   <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
   <tr ng-repeat="item in items">
        <td>
            {{item.name}}
        </td>
        <td>
             <input type="checkbox" ng-model="item.Selected" />
        </td>
    </tr>  

The controller could look something like this:

angular.module("myApp", [])
    .controller("checkboxCtrl", function($scope) {

    $scope.Items = [{
        name: "one"
    }, {
        name: "two"
    }, {
        name: "three"
    }];

    $scope.checkAll = function () {
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectAll;
        });
    };   
});

you can do it with a simple variable in your HTML :

<input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)" ng-selected="checkAll">
<button ng-click="toggleAllCheckboxes()">Check/Uncheck All</button>

and in your controller :

$scope.checkAll = false;
$scope.toggleAllCheckboxes = function(){
    $scope.checkAll = !$scope.checkAll;
}