Selecting multiple checkboxes in Angular on button click

Question

I have a table in my HTML code in which the rows are generated by AngularJS ng-repeat. Each row contains a checkbox in the first column and other data in the corresponding columns. I am trying to mark all checkboxes as selected when this button which is present in another div is clicked.

<tbody>
  <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'">
    <td name="checkbox">
      <input type="checkbox" ng-model="row.checked" ng-style="row.checkboxStyle" ng-click="setSelectedRow(row)" />
    </td>
    <td>{{ row.data1 }}</td>
    <td>{{ row.data2 }}</td>
  </tr>
</tbody>

The button is as follows:

<div class="btn-group">
	<button type="button" id="selectAll" class="btn btn-default" title="Select All" ng-click="selectAllGrid()">Select All</button>
</div>

A method is called on the click of the checkbox that adds that particular row to an array. How will that method be called if I mark the checkbox as checked on click of the button.

quirimmo · Accepted Answer · 2017-05-30 06:59:42Z

2

use the directive ng-checked

<tbody>
  <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'">
    <td name="checkbox">
      <input type="checkbox" ng-checked="checkAll" ng-model="row.checked" ng-style="row.checkboxStyle" ng-click="setSelectedRow(row)" />
    </td>
    <td>{{ row.data1 }}</td>
    <td>{{ row.data2 }}</td>
  </tr>
</tbody>

and in your button function

selectAllGrid(){
 $scope.checkAll=true;
}

edited May 30, 2017 at 6:59

quirimmo

10k3 gold badges33 silver badges46 bronze badges

answered May 30, 2017 at 6:20

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

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

1 Comment

Salman Kazmi Over a year ago

it worked. Thanks mate. But the action that was performed when I clicked the checkbox is not happening.. Also after I click the checkbox manually the button stops working and doesn't select any further.

Sai · Accepted Answer · 2017-05-30 09:17:52Z

2

You can do like this:

<table>
    <tbody>
      <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'">
        <td name="checkbox">
          <input type="checkbox" ng-model="row.checked" ng-style="row.checkboxStyle" />{{row.checked}}
        </td>
        <td>{{ row.data }}</td>
      </tr>
    </tbody>
  </table>


  <div class="btn-group">
    <button type="button" id="selectAll" class="btn btn-default" title="Select All" ng-click="selectAllGrid()">Select All</button>
  </div>

and in your controller:

app.controller('MainCtrl', function($scope) {
  $scope.allchecked  = false;

  $scope.selectAllGrid = function(){
    console.log($scope.allchecked);
    $scope.allchecked = !$scope.allchecked
   for(var i =0; i<$scope.myObject.length; i++) {
     $scope.myObject[i].checked = $scope.allchecked ;
   }
  }

  $scope.myObject = [
      {"data": "sdfsdf"},
      {"data": "asdfassafs"},
      {"data": "asesfrsaedfsadfsadsd"}
    ]
});

Working plunker here

edited May 30, 2017 at 9:17

answered May 30, 2017 at 6:39

Sai

2,6685 gold badges34 silver badges49 bronze badges

4 Comments

Salman Kazmi Over a year ago

Thanks. Its a great answer. But how to call the function/event that was called when I physically marked the checkbox as checked.

Sai Over a year ago

Don't understand. Can you explain in detail.

Salman Kazmi Over a year ago

When I manually click the checkbox to check/uncheck it, an event is triggered and I call a method in JS for that event. I populate an array with the values of that row where that checkbox was present. Now when I check/uncheck it with a button, that method is not being fired on checkbox check/uncheck.

Sai Over a year ago

Ok. I updated the plunker. Once see that. If I miss anything tell me.

Collectives™ on Stack Overflow

Selecting multiple checkboxes in Angular on button click

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related