New to AngularJs, I am facing a challenge with the code below. The table is populated using Angularjs and includes a selectAll checkbox in the header that should select all checkboxes in the table when checked. However, due to sorting and filtering capabilities, I'm unsure how to implement this functionality. Can you provide guidance on achieving this?
A Plunker link for reference:
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Hosts {{ currentPage }}</h5>
<!--<button class="btn btn-sm btn-warning pad-btn" type="submit" ng-click="reset()" style="float:right;">Refresh<i class="fa fa-history"></i></button>-->
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-4 m-b-xs">
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options" ng-model="pageSize" value="10">10</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option2" name="options" ng-model="pageSize" value="25">25</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options" ng-model="pageSize" value="50">50</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option4" name="options" ng-model="pageSize" value="100">100</label>
</div>
</div>
... (remaining text omitted for brevity) Thank You! </p>
</div></questionbody>
<exquestionbody>
<div class="question">
<p>I am new to AngularJs. I have the code below where I have a table and rendering the content of the table using Angularjs. I have a selectAll checkbox on the header on checking of which I need all the checkboxes in the table to get selected. Since I can sort, filter the content, I am not understanding how to select all the checkboxes of the table. Can you please let me know how to get this implementation. </p>
<p>Also added a plunker for this code </p>
<p><a href="http://plnkr.co/edit/EcdrWNEuTw6hMvVirLnE?p=preview" rel="nofollow">Plunker link</a></p>
<pre><code><div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Hosts {{ currentPage }}</h5>
<!--<button class="btn btn-sm btn-warning pad-btn" type="submit" ng-click="reset()" style="float:right;">Refresh<i class="fa fa-history"></i></button>-->
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-4 m-b-xs">
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options" ng-model="pageSize" value="10">10</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option2" name="options" ng-model="pageSize" value="25">25</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options" ng-model="pageSize" value="50">50</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option4" name="options" ng-model="pageSize" value="100">100</label>
</div>
</div>
... (remaining text omitted for brevity) Thanks</p>
</div>
</exquestionbody>
<answer1>
<div class="answer" i="31389284" l="3.0" c="1436796194" m="1436808598" v="1" a="SmVhbiBDZWRyb24=" ai="4778944">
<p>Try this:</p>
<p>On <strong>thead</strong> change your checkbox line for this:</p>
<pre><code><td><input type="checkbox" ng-change="updateHosts()" ng-model="allHosts"/></td>
On tbody change your checkbox line for this:
<td><input type="checkbox" ng-model="host.checked"/></td>
Change your $scope.newHosts for this:
$scope.newHosts=[
{
"id": 1,
"name": "Pradeep",
"application": "Angularjs",
"checked": false
},
{
"id": 2,
"name": "Praveen",
"application": "NodeJs",
"checked": false
},
{
"id": 3,
"name": "Raj",
"application": "Java",
"checked": false
},
{
"id": 4,
"name": "Ram",
"application": "Dontnet",
"checked": false
}
];
Finally, add this method:
$scope.updateHosts = function (){
$scope.newHosts.forEach(function(host){
host.checked = $scope.allHosts;
});
};
Aditional: Get rid of your update method.
Now, when you click on each checkbox, the variable checked will change inside $scope.newHosts.
Edit
If you just want to check the filtered ones, try this:
<tr dir-paginate="host in filteredHosts = ( newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage:pageSize)"
pagination-id="host" current-page="currentPage">