How do I bind to list of checkbox values with AngularJS?

Question

I have a few checkboxes:

<input type='checkbox' value="apple" checked> <input type='checkbox' value="orange"> <input type='checkbox' value="pear" checked> <input type='checkbox' value="naartjie"> 

That I would like to bind to a list in my controller such that whenever a checkbox is changed the controller maintains a list of all the checked values, for example, ['apple', 'pear'].

ng-model seems to only be able to bind the value of one single checkbox to a variable in the controller.

Is there another way to do it so that I can bind the four checkboxes to a list in the controller?

Answer 1

There are two ways to approach this problem. Either use a simple array or an array of objects. Each solution has it pros and cons. Below you'll find one for each case.

---

With a simple array as input data

The HTML could look like:

<label ng-repeat="fruitName in fruits">   <input     type="checkbox"     name="selectedFruits[]"     value="{{fruitName}}"     ng-checked="selection.indexOf(fruitName) > -1"     ng-click="toggleSelection(fruitName)"   > {{fruitName}} </label> 

And the appropriate controller code would be:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {    // Fruits   $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];    // Selected fruits   $scope.selection = ['apple', 'pear'];    // Toggle selection for a given fruit by name   $scope.toggleSelection = function toggleSelection(fruitName) {     var idx = $scope.selection.indexOf(fruitName);      // Is currently selected     if (idx > -1) {       $scope.selection.splice(idx, 1);     }      // Is newly selected     else {       $scope.selection.push(fruitName);     }   }; }]); 

Pros: Simple data structure and toggling by name is easy to handle

Cons: Add/remove is cumbersome as two lists (the input and selection) have to be managed

---

With an object array as input data

The HTML could look like:

<label ng-repeat="fruit in fruits">   <!--     - Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted       traditionally      - Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression       (no two-way-data-binding)      - Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`       is arbitrary. The property name could be anything and will be created on the object if not present.   -->   <input     type="checkbox"     name="selectedFruits[]"     value="{{fruit.name}}"     ng-model="fruit.selected"   > {{fruit.name}} </label> 

And the appropriate controller code would be:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {    // Fruits   $scope.fruits = [     { name: 'apple',    selected: true },     { name: 'orange',   selected: false },     { name: 'pear',     selected: true },     { name: 'naartjie', selected: false }   ];    // Selected fruits   $scope.selection = [];    // Helper method to get selected fruits   $scope.selectedFruits = function selectedFruits() {     return filterFilter($scope.fruits, { selected: true });   };    // Watch fruits for changes   $scope.$watch('fruits|filter:{selected:true}', function (nv) {     $scope.selection = nv.map(function (fruit) {       return fruit.name;     });   }, true); }]); 

Pros: Add/remove is very easy

Cons: Somewhat more complex data structure and toggling by name is cumbersome or requires a helper method

---

Demo: http://jsbin.com/ImAqUC/1/