Question

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

我错过了什么？

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

$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属性以获取值

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

3 个答案: