Angular Multi-Checkbox Array in ng-repeat

Angular Multi-Checkbox Array in ng-repeat

本文关键字：ng-repeat in Array Multi-Checkbox Angular      更新时间：2023-09-26

我正试图用Angular构建一个简单表单的一部分，但其中的一小部分却很吃力。

表单的一部分有一个"Divisions"部分，其中包含从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>

同样为了说明，在控制器中存在CCD_ 2和CCD_ 3。

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

您的复选框将所选值存储在同一范围对象上（它们都具有相同的ng模型），因此当复选框更改时，ng模型将更新以反映新选中的复选框（从以前的复选框中删除复选框）。

下面的答案向您展示了解决问题的两种方法：如何使用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);

这似乎可以满足您的需要，一组复选框都由一个模型支持：http://vitalets.github.io/checklist-model/

相关文章：