Question

我正在尝试使用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>

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

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

Answer 1

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

Answer 2

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

以下是一个答案，向您展示了解决问题的两种方法：How do I bind to list of checkbox values with AngularJS?

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

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

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

ng-repeat中的Angular Multi-Checkbox数组

2 个答案: