How To Get An Array With Just The Values From Selected Checkboxes?

How can I bind checkboxes to an array in my model, so that the array always contains just the values corresponding to the selected checkboxes? For example, instead of: 'groups': {

Solution 1:

There is no native support in AngularJS for checkboxes adding/removing values from an array. There cannot be, because form control model-view binding is managed by ngModel, which requires the control (input) to bind its value to a separate assignable expression (so there's no way to make ngModeldelete a value when the checkbox is unchecked).

Don't Mind undefined

You can either solve this by making model.groups an Array and using doing the following code:

<label ng-repeat="group in groups">
    <inputtype="checkbox" ng-model="model.groups[$index]" ng-true-value="group.name" ng-false-value="undefined">
    ...
</label>

and then filter out the undefineds when using the array.

Computed Property

Or you can just assign the boolean true/false values to an object and set a $watch on that object that automatically updates your array.

<inputtype="checkbox" ng-model="model.groupFlags[group.name]">

+

var groups = $scope.model.groups = [];
$scope.$watch('model.groupFlags', function (flags) {
    groups.length = 0;
    for (var key in flags) {
        groups.push(key);
    }
}, true);

---

Original answer (the question was unclear):

The documentation suggests that ng-true-value and ng-false-value should work just fine:

<inputtype="checkbox" ng-model="..." ng-true-value="group.name" ng-false-value="''">

Solution 2:

Use an ng-click or cg-change handler that adds/removes values from the array.