Hei, guys! I want to implemented a fully functional select all checkbox that selects and deselects all elements and if I have an already selected element or a number of elements and I tick the select all button I want that the remained elements to be checked too, those that were not checked.
This is my function in my controller:
$scope.selectAll = function(){
console.log($scope.modelItemsList);
$rootScope.items.allItemsSelected = !$rootScope.items.allItemsSelected;
console.log($rootScope.items.allItemsSelected);
if($rootScope.items.allItemsSelected){
for (var i = 0; i < $scope.modelItemsList.length; i++) {
$rootScope.temp.push($scope.modelItemsList[i].name);
console.log($scope.modelItemsList[i].name);
$scope.modelItemsList[i].isChecked = $rootScope.items.allItemsSelected;
console.log($scope.modelItemsList[i].isChecked);
}
}
else{
for (var i = 0; i < $scope.modelItemsList.length; i++) {
$scope.modelItemsList[i].isChecked = $rootScope.items.allItemsSelected;
$rootScope.temp = [];
console.log($scope.modelItemsList[i].isChecked);
}
}
}
And this is the html:
<md-checkbox ng-model="items.allItemsSelected"
ng-change="selectAll()">
Select all
</md-checkbox>
<md-list> <md-list-item class="md-3-line"
ng-repeat="modelItem in modelItemsList | filter:searchText track by $index">
<div class="md-list-item-text">
<md-checkbox ng-model="modelItem.isChecked " aria-label="Checkbox 1" ng-change="selectModelItem(modelItem)">
<h3></h3>
<p></p>
</md-checkbox>
</div>
</md-list-item> </md-list>
Does anybody have some ideas on how to implement this ? Thanks in advance!
Aucun commentaire:
Enregistrer un commentaire