如何使用所选复选框中的值获取数组？

Question

如何将复选框绑定到模型中的数组，以便数组始终只包含与所选复选框对应的值？

例如，而不是：

"groups": { "name1": true, "name2": false, "name3": true }

我需要得到：

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

我浏览了很多问题，并建议使用ng-true来获取自定义值，但这并不能解决问题，因为我得到了：

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

我目前的代码如下：

<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>

Answer 1

AngularJS中没有原生支持，用于添加/删除数组中的值的复选框。不可能，因为表单控件模型 - 视图绑定由ngModel管理，这需要控件（输入）将其值绑定到单独的可指定表达式（因此无法使ngModel 取消选中复选框时，删除值。

不要介意undefined

您可以通过model.groups Array并使用以下代码来解决此问题：

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

然后在使用数组时过滤掉undefined。

计算财产

或者您可以将布尔true / false值分配给对象，并在该对象上设置$watch以自动更新阵列。

<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);

---

原始答案（问题不清楚）：

The documentation表明ng-true-value和ng-false-value应该可以正常运作：

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

Answer 2

使用ng-click或cg-change处理程序添加/删除数组中的值。