Angular: How to uncheck all checkboxes with a link?

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>

Solution 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;
});

Solution 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/

Solution 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/

Comments

[bigpotato]

So you can attach the .selected property dynamically to a color like that? Where does that come from

[Phil Sandler]

To answer your question: yes, that's just part of the way angular binding works--if the property isn't on the javascript object, it will add it. That said, note that in the jsFiddle in my answer, the object is initialized with "selected". Here is a version (that also works) without that: jsfiddle.net/VSph2/286.

[Matsemann]

@PhilSandler of course not. Is there really that many ways to do this? Since he had already used the selected variable name I choose that, same as you did. And then added the selected attribute to the model to help his understanding. I decided to keep my answer, as I added more detail than you.