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>
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).
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 undefined
s when using the array.
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="''">
使用ng-click或cg-change处理程序,可以从数组中添加/删除值。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.