Angular: How to uncheck all checkboxes with a link? - html

Question

Here's my fiddle: http://jsfiddle.net/VSph2/280/
I'm trying to uncheck a checkbox and reset the values of a scope variable with a link, however, it doesn't seem to work. Could someone help?
Javascript:
var app = angular.module('myApp', []);
app.controller('IndexCtrl', ['$scope', function($scope) {
$scope.colors = [
{id: 1, name: "Blue"},
{id: 2, name: "Green"},
{id: 3, name: "Red"}
];
$scope.color_ids = [];
$scope.clearAll = function() {
angular.forEach($scope.color_ids, function(color_id) {
color_id.checked = false; //nothing works!!
color_id.selected = false; //
});
$scope.color_ids = [];
$scope.color_ids.selected = false; //doesn't work either
};
}]);
HTML:
<div ng-controller="IndexCtrl">{{1+1}}
<h2>Products</h2>
<div class="filters col-two">
<a ng-click="clearAll()">Clear all filters</a>
<h3>Color</h3>
<div ng-repeat="color in colors">
{{ color.name }} <input type="checkbox" ng-model="color_ids">
</div>
</div>
</div>

Answer 1

You never add anything to the color_id array, so the foreach is not iterating over anything.
I updated your code to just use the main color array and add a selected property on it:
http://jsfiddle.net/VSph2/283/
html:
{{ color.name }} <input type="checkbox" ng-model="color.selected">
javascript:
angular.forEach($scope.colors, function(color_id) {
color_id.selected = false;
});

Answer 2

I came across this while looking for something similar, my solution is to reset the color_ids object
$scope.clearAll = function() {
$scope.color_ids = [];
};
You also need to make the following changes to the input
<input type="checkbox" ng-model="color_ids[color.id]" ng-checked="color_ids[color.id]">
jsfiddle at
https://jsfiddle.net/novelnova/VSph2/756/

Answer 3

You are misunderstanding what ng-model on a checkbox does. It will only toggle a specific value set. So in your example, you would want to change it to:
{{ color.name }} <input type="checkbox" ng-model="color.selected">
And then your colors will have an additional attribute called selected that is either true or false, depending on if the box is checked or not.
To clear, you would then loop over all colors and set their selected state to false.
$scope.clearAll = function() {
angular.forEach($scope.colors, function(color) {
color.selected = false;
});
Updated fiddle: http://jsfiddle.net/VSph2/285/