Angular：如何获取多个复选框值答案

【问题标题】：Angular: How to get multiple checkbox valuesAngular：如何获取多个复选框值
【发布时间】：2014-08-23 18:30:13
【问题描述】：

我可能会错过一些基本的 Angular 概念，因为我的 ng-change 事件标记了两个复选框，而不仅仅是一个。

这些是我的观点（html 文件）（注意<input> 标签）：

<li>
    <label for="id_trade_type_0">Trade type:</label> 
    <ul id="id_trade_type">
        <li>
            <label for="id_trade_type_0">
                <input id="id_trade_type_0" name="trade_type" ng-change="filterMarkers()" ng-false-value="2" ng-model="formData.trade_type" ng-true-value="1" type="checkbox" value="1" /> Pardavimas
            </label>
        </li>
        <li>
            <label for="id_trade_type_1">
                <input id="id_trade_type_1" name="trade_type" ng-change="filterMarkers()" ng-false-value="2" ng-model="formData.trade_type" ng-true-value="1" type="checkbox" value="2" /> Nuoma
            </label>
        </li>
    </ul>
</li>
</ul>

这是我的控制器中的功能：

$scope.filterMarkers = function() {
  $scope.clearMarkers();
  $scope.loadMarkers('/get_markers/?' + $.param($scope.formData));
  console.log($scope.formData)
}

当我从视图中删除 ng-model="formData.trade_type" 时，我可以单独单击复选框（但当然代码不能正常工作）。

我错过了什么？

【问题讨论】：

标签： javascript jquery angularjs checkbox

【解决方案1】：

这是因为您对两个输入都使用了相同的ng-model="formData.trade_type"。

使用不同的模型来存储不同的值

例如：ng-model="formData.trade_type_1" 和 ng-model="formData.trade_type_2"

编辑：由于您有不同的值，如果您想使用相同的模型，您可以使用单选按钮而不是选择框，那么只会选择一个

【讨论】：

谢谢你的回答，我现在明白这个问题了。最糟糕的是我必须使用相同的模型，现在必须找到一种方法如何将两个复选框的值发送为formData。
如果您想使用相同的模型并且只选择一个值，请使用单选按钮而不是复选框
抱歉不清楚。请检查我的控制器。当我在其他字段中使用单选按钮时（只有 1 个选项），我的控制器的 $scope.loadMarkers 会构造一个 URL，例如 /get_markers/?property_parent=12 或 /get_markers/property_type=23。但在这种特殊情况下，我想使用复选框，并且我希望我的控制器构造一个 /get_markers/trade_type=1&trade_type=2&trade_type=123 的 url（这就是我需要这些复选框的原因，这就是我需要相同模型的原因）。你能告诉我我应该搜索什么信息来实现这个目标吗？
好的，我明白了，我遇到了类似的问题，我会再为你发布一个答案。

【解决方案2】：

正如你所说，这是一种将不同复选框值存储在数组中的方法

$scope.selectedValues = [];

$scope.select = function (item) {
   var index = $scope.selectedValues.indexOf(item.value);
   if (item.isChecked) { // adding the value if checked and not exist in array
      if (index == -1) {
         $scope.selectedValues.push(item.value);
      }
   } else {
      if (index > -1) { // removing the value if uncheked and exist in array
         $scope.selectedValues.splice(index, 1);
      }
   }
}

在模板中：

<input type='checkbox' ng-model='item.isChecked' ng-value='item.value' 
ng-change='select(item)'/>

您想要的值将存储在$scope.selectedValues，您可以从该值构造一个查询字符串

注意：确保您的item is an object，并且应该分配item.value 属性以获取值

【讨论】：

感谢您的回答。不幸的是，当我单击其中一个复选框时，两个复选框都被选中了，这可能是因为这两个复选框上的ng-model 仍然相同（ng-model='item.isChecked'）？..
是的，如果你有多个值，我以为你在循环，所以每个项目都是不同的对象。您必须循环这些值才能使其正常工作
1.您必须循环这些值才能使此代码正常工作，或者 2. 使用不同的 ng-model 并使用您以前的代码
不，不幸的是我没有循环，这些字段是由Django框架的ModelMultipleChoiceFilter生成的：trade_type = django_filters.ModelMultipleChoiceFilter(queryset=Trade.objects.all(), widget=CheckboxSelectMultiple(attrs={'ng-model': "formData.isChecked", "ng-change": "select(formData)", "ng-value" : "formData.property_type", }))

【解决方案3】：

对于您的两个输入，您使用相同的ng-model 属性。您可以在此处查看示例：https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

【讨论】：