mardi 2 août 2016

Select all checkbox AngularJS

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