Checking all checkboxes of table body with checkbox in table head angularjs - html

Question

<table id="table" class="table table-bordered font" style="width: 100%; padding-top:10px;">
<thead>
<tr class="bg-primary textalign">
<th>Details</th>
<th>SonVin Id</th>
<th>Date</th>
<th>Venue Name</th>
<th>City</th>
<th>Area</th>
<th>Amount</th>
<th><input type="checkbox" ng-model="checkall" /><span style="margin-left:10px;">Add Invoice</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in getdataintable">
<td>Details</td>
<td>{{data.sonvinid}}</td>
<td>{{data.date}}</td>
<td>{{data.venuename}}</td>
<td>{{data.location}}</td>
<td>{{data.area}}</td>
<td>{{data.amount}}</td>
<td><input type="checkbox" ng-model="check" /></td>
</tr>
</tbody>
</table>
This is my table,
here I have this line( <th><input type="checkbox" ng-model="check" /><span style="margin-left:10px;">Add All Invoice</span></th>).
This indicates that if a user checked this checkbox, all the other checkboxes should also be checked.
Now what I want is if a particular user clicks on a checkbox on thead, all the checkboxes of td also be check and all the data of <td>{{data.sonvinid}}</td>
should be stored in the array in my controller of angularjs.
$scope.storeall=[];
I want to do this with angularjs,
anyone here who can help me?

Answer 1

make inside your controller some methods like this
method to select All
method for deselect All
method for toggle between above
var app = angular.module('app',[]) // the app module
app.controller('tableCtrl',function($scope){
$scope.storeall = [];
$scope.selectAllFlag = false;
$scope.getdataintable = [
{sonvinid:1, date : "string" , venuename: "String Name" },
{sonvinid:2, date : "string" , venuename: "String Name" }
];
$scope.checkAllToggle = funciton(){
if(!$scope.selectAllFlag){
$scope.selectAll();
$scope.selectAllFlag = true;
}else {
$scope.deselectAll();
$scope.selectAllFlag = false;
}
};
$scope.selectAll = function(){
for (var i = 0 ; i < $scope.data.length ; i++){
$scope.getdataintable[i].selected = true;
$scope.storeall.push($scope.data[i].sonvinid);
}
};
$scope.deselectAll = function(){
for (var i = 0 ; i < $scope.data.length ; i++){
$scope.getdataintable[i].selected = false;
$scope.storeall = [];
}
};
});
to Use it on HTML:
<table id="table" class="table table-bordered font" ng-controller="tableCtrl" style="width: 100%; padding-top:10px;">
<thead>
<tr class="bg-primary textalign">
<th>Details</th>
<th>SonVin Id</th>
<th>Date</th>
<th>Venue Name</th>
<th>City</th>
<th>Area</th>
<th>Amount</th>
<th><input type="checkbox" ng-model="checkAllToggle()" /><span style="margin-left:10px;">Add Invoice</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in getdataintable">
<td>Details</td>
<td>{{data.sonvinid}}</td>
<td>{{data.date}}</td>
<td>{{data.venuename}}</td>
<td>{{data.location}}</td>
<td>{{data.area}}</td>
<td>{{data.amount}}</td>
<td><input type="checkbox" ng-checked="data.selected" /></td>
</tr>
</tbody>
</table>