Check/ Uncheck All checkboxes - AngularJS ng-repeat - angularjs

Question

I have a structure which looks like this: http://jsfiddle.net/deeptechtons/TKVH6/
<div>
<ul ng-controller="checkboxController">
<li>Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
</div>
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});
When check all is selected or deselected, all other checkboxes are selected. But when "Check All" is selected, and I deselect one of the items, I want "Check All" to be deselected.
Thanks in advance!
(PS: Thanks to deeptechtons for the JSFiddle)

Answer 1

If you are using Angular 1.3+ you can use getterSetter from ng-model-options to solve this and avoid manually keeping track of the allSelected state
HTML:
<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
JS:
var getAllSelected = function () {
var selectedItems = $scope.Items.filter(function (item) {
return item.Selected;
});
return selectedItems.length === $scope.Items.length;
}
var setAllSelected = function (value) {
angular.forEach($scope.Items, function (item) {
item.Selected = value;
});
}
$scope.allSelected = function (value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
http://jsfiddle.net/2jm6x4co/

Answer 2

You can use this function to check if all records are checked whenever a checkbox changes:
$scope.checkStatus= function() {
var checkCount = 0;
angular.forEach($scope.Items, function(item) {
if(item.Selected) checkCount++;
});
$scope.selectedAll = ( checkCount === $scope.Items.length);
};
The view code:
<input type="checkbox" ng-model="item.Selected" ng-change="checkStatus();"/>
http://jsfiddle.net/TKVH6/840/

Answer 3

working example: http://jsfiddle.net/egrendon/TKVH6/845/
view:
<input type="checkbox" ng-model="item.Selected" ng-click="setCheckAll(item)" />
controller:
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
$scope.setCheckAll = function (item) {
//
// Check if checkAll should be unchecked
//
if ($scope.selectedAll && !item.Selected) {
$scope.selectedAll = false;
}
//
// Check if all are checked.
//
var checkCount = 0;
angular.forEach($scope.Items, function(item) {
if(item.Selected) checkCount++;
});
$scope.selectedAll = ( checkCount === $scope.Items.length);
};
});

Answer 4

Here is a neat little way of doing this
http://jsfiddle.net/TKVH6/850/
Use a little bit of undescore (just the reduce) and ng-checked
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" ng-checked="allSelected()"/>
$scope.allSelected = function () {
var allSelect = _.reduce($scope.Items, function (memo, todo) {
return memo + (todo.Selected ? 1 : 0);
}, 0);
return (allSelect === $scope.Items.length);
};
You could use javascripts built in .reduce if you did not want to use underscore.

Answer 5

This answer has similar logic to Kmart2k1's answer. It puts the responsibility of updating the master checkbox on each child in the ng-repeat. Instead of using array.forEach, I use array.some to more quickly check if any of the items are unselected.
HTML:
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" ng-change="notifyMaster()"/>
</label>
</li>
Javascript
$scope.notifyMaster = function () {
$scope.selectedAll = !$scope.Items.some(function (item) {
return !item.Selected; //check if ANY are unchecked
});
}
Forked fiddle