angularjs中列表的多个复选框选择答案

【问题标题】：Multiple checkbox selection for list in angularjsangularjs中列表的多个复选框选择
【发布时间】：2016-11-21 01:11:56
【问题描述】：

我有产品列表，每个产品都有学生列表。我有要显示的产品 JSON；在该产品 JSON 中，我为学生提供了另一个 JSON：

[{"CustId":7191,"CFirstName":"Kynan"},{"CustId":29689,"CFirstName":"Pete"},{"CustId":29690,"CFirstName":"Gina"},{"CustId":29692,"CFirstName":"Jo"}]

我想为每个学生和每个产品添加复选框。

这是我为每个产品所做的：

<span ng-repeat="customer in productVM.product.Customers">
                        <label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '>
                            <input class="options" ng-model="customer.CustId" type='checkbox' name="selectedStudent[]"
                                   value="{{customer.CustId}}" ng-checked="selection.indexOf(customer.CFirstName) > -1" ng-click="toggleSelection(customer.CFirstName)">
                            {{customer.CFirstName}}
                        </label>
                    </span>

角度代码：

 $scope.selection = [];
$scope.toggleSelection = function toggleSelection(customerName) {
    var idx = $scope.selection.indexOf(customerName);

    // is currently selected
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }

        // is newly selected
    else {
        $scope.selection.push(customerName);
    }
};

我有两个问题： 1. 每当我点击产品的任何复选框时；选中所有产品的类似复选框（未选中时类似）。 2. 如何获取选中复选框的值。

【问题讨论】：

标签： angularjs json checkbox

【解决方案1】：

这对我有用：

<label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '>
                            <input class="options" ng-model="selection[productVM.product.Id].customers[customer.CustId]" type='checkbox' name="selectedStudent[]"
                                   value="{{customer.CustId}}">
                            {{customer.CFirstName}}
                        </label>

来源：

http://stackoverflow.com/questions/27148320/how-to-use-checkbox-with-nested-ng-repeat-in-angularjs

并且 http://jsfiddle.net/0x4396pu/1/

【讨论】：

【解决方案2】：

您需要在input 元素上定义唯一的id 属性。

ng-model https://docs.angularjs.org/api/ng/directive/ngModel - 默认使用复选框时不需要值...只需在客户对象中定义新字段（例如 customer.checked）并将其绑定到 ng-model 指令。

<span ng-repeat="customer in productVM.product.Customers">
    <label for="{{customer.CustId}}" class="checkbox-inline" style="margin-left:0px !important; margin-right: 10px !important;">
        <input id="{{customer.CustId}}" class="options" ng-model="customer.checked" type="checkbox" name="customerCheck" ng-click="toggleSelection($index)"/>
        {{customer.CFirstName}}
    </label>
</span>

【讨论】：

感谢您的回复，但这并没有带来任何改变。我已经在上面发布了答案。