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

manpreet Best Answer 2 years ago

I have a few checkboxes:

 type='checkbox' value="apple" checked>
 type='checkbox' value="orange">
 type='checkbox' value="pear" checked>
 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?

manpreet 2 years ago

A simple solution:

 ng-controller="MainCtrl">
   ng-repeat="(color,enabled) in colors">
      <input type="checkbox" ng-model="colors[color]" /> {{color}} 
  
  
colors: {{colors}}