javascript - ng-repeat 中的 Angular 多复选框数组

Question

我正在尝试使用 Angular 构建简单表单的一部分，但仍在努力解决其中的一小部分。

表单的一部分有一个“分区”部分，其中包含通过 API 调用动态填充的复选框列表。然后，用户可以选择 1 到 7 个不同的复选框来选择表单所属的“部门”。

然后，当用户提交表单时，它应该发布类似于 Divisions: 'div1 div2 div3 div4'

的 JSON

我遇到的问题是由于某种原因我无法一次选择多个复选框。如果我尝试选择另一个，它会取消选中我选择的第一个。

这是我正在使用的代码。

        <label>Divisions Participating*</label>
        <div class="radio-check-wrap">
            <ul class="radio-check-group">
                <li ng-repeat="d in divisions">
                    <input type="checkbox" 
                           ng-model="tradeshow.DivisionLead" 
                           ng-true-value="div{{$index}}" 
                           class="" id="div{{$index}}" 
                           name="div{{$index}}" />
                    <label for="div{{$index}}">{{d.Description}}</label>
                </li>
            </ul>
        </div>

另外为了澄清， Controller 中有一个 $scope.divisions = Api.divisions.query(); 和一个 $scope.tradeshow = {}。

知道为什么我无法一次选择多个复选框吗？

Answer 1

您的复选框将所选值存储在同一范围对象上(它们都具有相同的 ng-model)，因此当检查更改时，ng-model 会更新以反射(reflect)新选中的框(这会删除检查)从上一个)。

这里的答案向您展示了解决该问题的两种方法:How do I bind to list of checkbox values with AngularJS?

我对对象数组进行了更改作为输入数据:http://plnkr.co/edit/otVgVMtwUGkIwr2uaSpq?p=preview

您需要存储项目上的“选定”值，然后计算选定的项目。所以我将您的复选框更改为:

<input type="checkbox" ng-model="d.selected" class="" id="div{{$index}}" name="selectedDivisions[]" />

我已经使用获取和存储所选值的方法更新了您的代码:

$scope.divisions = [
  { Description: 'test1' },
  { Description: 'test2' },
  { Description: 'test3' },
  { Description: 'test4' }
];

// selected divisions
$scope.selection = [];

// helper method
$scope.selectedDivisions = function selectedDivisions() {
  return filterFilter($scope.divisions, { selected: true });
};

// watch divisions for changes
$scope.$watch('divisions|filter:{selected:true}', function (nv) {
  $scope.selection = nv.map(function (division) {
    return division.Description;
  });
}, true);