Checkbox Array

Get a list of checked checkbox values

by Rob Rothe

HTML

<div ng-app="checkboxApp" ng-controller="CheckboxCtrl"> <pre>{{colors}}</pre>

    <div ng-repeat="c in color_list">
        <input type="checkbox" ng-model="c.selected" ng-true-value="true" id="{{$index}}">
        <label for="{{$index}}">{{c.name}}</label>
        <br>
    </div>
</div>

JavaScript

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

app.controller('CheckboxCtrl', function ($scope) {
    $scope.color_list = [{
        name: 'Red',
        selected: false
    }, {
        name: 'Blue',
        selected: false
    }, {
        name: 'Yellow',
        selected: false
    }];

    $scope.$watchCollection('color_list | filter:{selected:true}', function (color) {
        $scope.colors = [];
        angular.forEach(color, function (c) {
            if (c.selected) {
                $scope.colors.push({
                    color: c.name
                });
            }
        });
    });

});