Binding to List of Checkbox Values with AngularJS

AngularJS provides powerful features for handling dynamic data binding, making it convenient to work with lists of checkbox values.

There are two common approaches to accomplish this task:

1. Using a simple array as input data.
2. Using an object array as input data.

In this article, we’ll explore both methods with code examples and discuss their pros and cons.

1. Using a Simple Array as Input Data

This approach involves using a simple array as input data to generate checkboxes dynamically in AngularJS. Each checkbox represents an item from the array, and the state of the checkboxes is managed by a separate array.

HTML Markup

This snippet shows the HTML markup used to generate checkboxes dynamically based on a simple array (fruits). Each checkbox represents a fruit, and its state (checked or unchecked) is determined by the selection array in the controller.

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

Explanation:

• This snippet creates checkboxes dynamically based on the items in the fruits array.
• ng-repeat is used to iterate over each fruitName in the fruits array.
• The checkbox state is determined by the ng-checked directive, which checks if the current fruitName is present in the selection array.
• ng-click triggers the toggleSelection function when the checkbox is clicked.

Controller Code

The controller code initializes the fruits array with a list of fruit names and the selection array with initially selected fruits. It also defines the toggleSelection function, which toggles the selection state of a fruit when its corresponding checkbox is clicked.

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

Explanation:

• The controller initializes the fruits array and the initially selected selection array.
• toggleSelection function is defined to toggle the selection state of a fruit based on its name.

Pros:

• Simple data structure.
• Toggling by name is straightforward.

Cons:

• Managing two lists (input and selection) can be cumbersome for add/remove operations.

2. Using an Object Array as Input Data

This approach involves using an array of objects as input data. Each object represents an item, and the checkboxes are generated based on properties of these objects. This method simplifies add/remove operations.

HTML Markup

Similar to the previous section, this snippet shows HTML markup for generating checkboxes based on an object array (fruits). Each object in the array contains a name property for the fruit name and a selected property to track its selection state.

<label ng-repeat="fruit in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruit.name}}"
    ng-model="fruit.selected"
  > {{fruit.name}}
</label>

Explanation:

• This snippet generates checkboxes based on an array of objects (fruits).
• Each object has a name property for the fruit name and a selected property to track its selection state.
• ng-model is used to bind the checkbox state directly to the selected property of each fruit.

Controller Code

The controller code initializes the fruits array with objects representing fruits, where selected indicates whether the fruit is initially selected. It also defines a helper method selectedFruits to filter and retrieve selected fruits and uses $watch to monitor changes in the fruits array and update the selection array accordingly.

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

Explanation:

• The controller initializes the fruits array with objects representing fruits and their initial selection states.
• A helper method selectedFruits filters and retrieves selected fruits.
• $watch is used to monitor changes in the fruits array and update the selection array accordingly.

Pros:

• Easy add/remove operations.
• Two-way data binding simplifies management.

Cons:

• More complex data structure.
• Toggling by name is cumbersome or requires a helper method.

Simple Solution using ng-model

This solution simplifies the code by using ng-model to directly bind the checkbox states to a scope variable. It avoids the need for additional arrays to manage the checkbox states.

HTML Markup

This snippet demonstrates a simpler approach using ng-model to bind checkbox states directly to a scope variable (colors). It iterates over key-value pairs in the colors object to generate checkboxes dynamically.

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

Explanation:

• This snippet uses ng-model to directly bind checkbox states to the colors object.
• It iterates over key-value pairs in the colors object to generate checkboxes dynamically.

Controller Code

The controller code initializes the colors object with key-value pairs representing colors and their initial selection states.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function ($scope) {
  $scope.colors = { Blue: true, Orange: true };
});

Explanation:

• The controller initializes the colors object with key-value pairs representing colors and their initial selection states.

Reusable Directive Solution:

This solution introduces a custom directive named checkList that encapsulates the logic for updating both the array and checkboxes. It provides a reusable component for managing checkbox interactions.

Directive Code

This snippet defines a custom directive named checkList that facilitates updating both the array and checkboxes. The directive’s scope includes list (the array to be updated) and value (the value to be toggled).

app.directive('checkList', function () {
  return {
    scope: {
      list: '=checkList',
      value: '@'
    },
    link: function (scope, elem) {
      var handler = function (setup) {
        var checked = elem.prop('checked');
        var index = scope.list.indexOf(scope.value);

        if (checked && index == -1) {
          if (setup) elem.prop('checked', false);
          else scope.list.push(scope.value);
        } else if (!checked && index != -1) {
          if (setup) elem.prop('checked', true);
          else scope.list.splice(index, 1);
        }
      };

      var setupHandler = handler.bind(null, true);
      var changeHandler = handler.bind(null, false);

      elem.bind('change', function () {
        scope.$apply(changeHandler);
      });
      scope.$watch('list', setupHandler, true);
    }
  };
});

Explanation:

• This snippet defines a custom directive named checkList that encapsulates the logic for updating both the array and checkboxes.
• The directive’s scope includes list (the array to be updated) and value (the value to be toggled).

Example Usage in HTML

This snippet demonstrates how to use the checkList directive in HTML to create checkboxes dynamically for a list of fruits (fruits). It also includes a button to manually add fruits to the array.

<div ng-app="myApp" ng-controller='MainController'>
  <span ng-repeat="fruit in fruits">
    <input type='checkbox' value="{{fruit}}" check-list='checked_fruits'> {{fruit}}<br />
  </span>

  <div>The following fruits are checked: {{checked_fruits | json}}</div>

  <div>Add fruit to the array manually:
    <button ng-repeat="fruit in fruits" ng-click='addFruit(fruit)'>{{fruit}}</button>
  </div>
</div>

Explanation:

• This snippet demonstrates how to use the checkList directive in HTML to create checkboxes dynamically for a list of fruits (fruits).
• It also includes a button to manually add fruits to the array.

Controller Code

The controller code initializes the fruits array with a list of fruits and the checked_fruits array with initially selected fruits. It also defines an addFruit function to manually add fruits to the checked_fruits array.

app.controller('MainController', function ($scope) {
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
  $scope.checked_fruits = ['apple', 'pear'];
  $scope.addFruit = function (fruit) {
    if ($scope.checked_fruits.indexOf(fruit) != -1) return;
    $scope.checked_fruits.push(fruit);
  };
});

Explanation:

• The controller initializes the fruits array with a list of fruits and the checked_fruits array with initially selected fruits.
• It defines an addFruit function to manually add fruits to the checked_fruits array.

These examples demonstrate different approaches to handle dynamic checkboxes in AngularJS, each with its own pros and cons depending on the specific requirements of your application.