Select all if all checkboxes are selected, angular js
NickName:antonyboom Ask DateTime:2016-11-05T04:31:59

Select all if all checkboxes are selected, angular js

On my page I have angular ui accordion, inside of each panel, I'm rendering list with items and checkboxes, also I have checkbox "select all". For selection method and logic I used this resource. In this resource logic seems working, but however I'm putting this logic to my code, it stops working.

What I want to achieve is when all checkboxes are selected, checkbox "select all" has been selected automatically, and if some of checkboxes is unselect, checkbox "select all" has to be unselect as well.

I have tried multiple suggestions provided here, here, here, but in the end I'm getting the same result.

I appreciate if somebody could help me to resolve my problem.

 $scope.categories = [
{
  id: 1,
  name: "category 1"
},
 {
  id: 2,
  name: "category 2"
},
 {
  id: 3,
  name: "category 3"
}
]

               $scope.selectedAll = false;
                $scope.selectAll = function(array) {
                    $scope.selectedAll = !$scope.selectedAll;
                    angular.forEach(array, function(item) {
                        item.Selected = $scope.selectedAll;
                    });
                };

                $scope.checkIfAllSelected = function(array) {
                    $scope.selectedAll = array.every(function(item) {
                        return item.Selected == true
                    })
                };

html

<div>
<div class="row" ng-class="{'selected': selectedAll, 'default': !selectedAll}">
    <div>Select all
        <input type="checkbox"
               ng-model="selectedAll" ng-click="selectAll(categories)" >
    </div>
</div>
<div class="row" ng-repeat="item in categories | orderBy : 'id'" ng-class="{'selected': item.selected, 'default': !item.selected}">
    <div > {{ item.name }}
        <input type="checkbox"
               ng-model="item.Selected" ng-click="checkIfAllSelected(categories)"
        >
    </div>
</div>

This is my plunker

Copyright Notice:Content Author:「antonyboom」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/40431274/select-all-if-all-checkboxes-are-selected-angular-js

More about “Select all if all checkboxes are selected, angular js” related questions

Select all if all checkboxes are selected, angular js

On my page I have angular ui accordion, inside of each panel, I'm rendering list with items and checkboxes, also I have checkbox "select all". For selection method and logic I used this resource. In

Show Detail

select all checkboxes with angular JS

I am trying to select all checkboxes with one single checkbox. But how to do that? This is my HTML: &lt;input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /&gt; &lt;!--

Show Detail

Angular JS select all/De select all checkboxes how to retrieve selected information

I am displaying output response(JSON) from REST API using Angular JS. I am planning to provide user with an option of checkbox for every result listed and also a selectall/deselectall checkbox .I am

Show Detail

Select all Checkboxes, appears selected, but are not

I'm having a strange problem, I've made a Select all checkbox, that mark as selected a lot of checkboxes. This is the CheckedChanged event protected void chkSelecionaTodasOcorrencias_CheckedChanged(

Show Detail

Unable to Select all checkboxes with Angular

Populated Angular dataTable and trying to select all checkboxes but unable to select, tried with below code. Could you please suggest me the solution. Please refer below Stackblitz for working demo

Show Detail

select all checkboxes in angular 2?

I have to select all checkboxes if user select 'All Neighbourhoods' checkbox in angular. I tried with below code. But not working. How to fix this in angular 2? explore-list.Component.html &...

Show Detail

AngularJs Checkbox that will toggle selected on all other checkboxes

I am using AngularJs (Angular 1) and I need to use a checkbox to Select / Unselect all other checkboxes. Right now I have this: &lt;li ng-repeat="item in ctrl.items"&gt; &lt;input type="checkb...

Show Detail

Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes

I'm having an issue trying to get Bootstrap 4 Checkboxes working with a select all and deselect all option in angular 6+. I can get it to work when I use the original code here: http://www.

Show Detail

material angular select all checkbox

I'm trying to implement select all checkbox on angular material. When user click on specifc checkbox (item), master checkbox should show Indeterminate and turn to checked if all checkboxes are sele...

Show Detail

Angular 4 select all checkboxes

i am trying to implement select all checkbox which will select all the checkboxes which is fine but when i click on other checkboxes other than select all it will again select all checkboxes Html...

Show Detail