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

Handling dynamic selections

AngularJS allows us to capture dynamic user selections in an array using a function like toggleSelection, that toggles the state of an item's existence in an array based on its checkbox.

$scope.selectedItems = [];

$scope.toggleSelection = function(item) {
    var idx = $scope.selectedItems.indexOf(item);
    
    if (idx > -1) {
        // "Oh, we meet again!" - Array 😅
        $scope.selectedItems.splice(idx, 1);
    } else {
        // "Hello, nice to meet you!" - Array 😊
        $scope.selectedItems.push(item);
    }
};


Complex data handling with objects

For binding checkboxes with more complex data structures like object arrays, we modify our checkbox management as follows:

$scope.items = [
    { id: 1, label: 'Option 1', isSelected: false },
    { id: 2, label: 'Option 2', isSelected: false }
];

$scope.toggleSelection = function(item) {
    // "I am a master toggler at your service!" - AngularJS 😎
    item.isSelected = !item.isSelected;
};


Directive for larger scale applications

For larger lists and scalability, a custom directive like checkList streamlines binding multiple checkboxes:

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);
                }
            };
            // "Set up or change? I can handle both!" - handler 🦾
            var setupHandler = handler.bind(null, true);
            var changeHandler = handler.bind(null, false);
            
            elem.on('change', function() {
                scope.$apply(changeHandler);
            });
            scope.$watch('list', setupHandler, true);
        }
    };
});


Utilize this directive in your markup like so:

<input type="checkbox" check-list="selectedItems" value="option1">


Providing user feedback

Displaying real-time binding results gives users a sense of control and validation. AngularJS’s data-binding allows for the use of curly braces {{}} for instant visual feedback:

<div ng-repeat="item in items">
    <input type="checkbox" ng-model="item.checked"> {{ item.name }}
    <span ng-show="item.checked">Selected!</span>
</div>


Proper syntax and potential pitfalls

Remember, syntax matters in AngularJS. Incorrectly declaring arrays or objects can cause unexpected behaviour:

$scope.selectedItems = [];    // Array
$scope.settings = { checked: false }; // Object


Stay aware of array mutability; ng-model may not react to changes on array sub-properties. Use $watchCollection or deep $watch in these cases.

Large dataset handling

Using filters and watchers

AngularJS’s in-built filters and watchers offer more dynamic interaction:

$scope.$watch('items', function(items) {
    $scope.selectedItems = items.filter(function(item) {
        return item.checked;
    });
}, true);


This $watch updates the selectedItems array whenever the items array changes, adding additional dynamic response to your application.

Performance with ng-change directive

Performance for larger lists is crucial. Using AngularJS’ ng-change directive can be more performant as compared to $watch, as it limits change triggers to user action instead of reacting on every digest cycle:

<input type="checkbox" ng-model="item.checked" ng-change="toggleSelection(item)">
