Angular:如何获取多个复选框值

Angular: How to get multiple checkbox values

本文关键字：复选框 获取 何获取 Angular      更新时间：2023-09-26

我可能会错过一些基本的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"时，我可以单独单击复选框(但当然代码不应该工作)。

我错过了什么

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

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

如:ng-model="formData.trade_type_1"和ng-model="formData.trade_type_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属性。您可以在这里看到示例:https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

相关文章：