0

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": { "name1": true, "name2": false, "name3": true }

I need to get:

 "groups": [ "name1", "name3" ]

I browsed through a lot of questions and some answers suggested using ng-true for getting custom values, but that does not solve the problem, because then I get:

"groups": { "name1": 'CustomvalueIset', "name2": 'CustomValueIset', "name3": 'CustomValueIset' }

My current code looks like this:

<div class="form-group">
   <label class="control-label" for="group">Groups</label><br/>
   <label class="checkboxes-br" data-ng-repeat="group in groups">
       <input type="checkbox" id="group" data-ng-model="model.groups[group.name]">
       {{group.name}}
   </label>
</div>
Improve this question
4
  • 1
    It's unclear what you're trying to accomplish. (For example "I need groups: {'Valuename', 'Valuename2'}" is both unclear and uses invalid syntax.) Commented Dec 11, 2014 at 11:26
  • I need to get that output in my JSON file Commented Dec 11, 2014 at 11:32
  • @VladimirJovanovic maybe you meant "groups": [ "Valuename", "Valuename2" ] as an array? Commented Dec 11, 2014 at 11:34
  • Yes, thats what I meant, I apologize for a bad syntax im a bit in a hurry typing right now Commented Dec 11, 2014 at 11:36

2 Answers 2

Reset to default
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 ngModel delete 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">
    <input type="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.

<input type="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:

<input type="checkbox" ng-model="..." ng-true-value="group.name" ng-false-value="''">
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Except they dont. When I use ng-true-value with <input type="checkbox" ng-model="..." ng-true-value="group.name" ng-false-value="''">{{group.name}} in my json output I get {{group.name}}.group.name. Here you are my Git project, its small, run it, check output and youll see github.com/BigBadVlada/angular
Add a group first, then add a site
I've updated the answer to respond to clarification of your question.
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.