Question

在HTML表单中，我需要跟踪检查哪些复选框，以便将其插入要发布到后端的查询对象中。

我在$ scope中的数组中有以下三个复选框：

$scope.typeCheckBoxes = [
      {label: "A", val: true},
      {label: "B", val: false},
      {label: "C", val: false}
    ];

以下是我的模板，用于呈现表单中的复选框：

<span ng-repeat="chk in typeCheckBoxes">
<input type="checkbox" ng-model="chk.val" id="chk.label" ng-change="addType(this)" />
            <label>{{chk.label}}</label>
</span>

在我的控制器中，我尝试创建函数 addType（），将选中的复选框添加到查询对象中：

$scope.queryObj = {
types: []
};

$scope.addType = function(e) {
   var selectedBox = angular.element(e.id); // not working
   if (selectedBox) {
     $scope.queryObj.types.push(selectedBox);
   }

};

但是，我不知道如何获得已选中复选框的id。非常感谢你的帮助。

Answer 1

您可以在控制器中执行此操作：

$scope.$watch('typeCheckBoxes', function(newObject, oldObject) {
// You can do what you want with your newObject here
}, true);

不要忘记 true 作为第二个参数。这允许您观看整个对象而不仅仅是一个简单的值。这个$ watch将在每次更改时触发。

因为复选框的ID是标签，所以你也可以在newObject中使用它。

Answer 2

您首先要记住的是，您应该在范围内编写addType函数，以便在更改复选框时触发它（因为您使用ng-change指令来查找当前范围内的函数）您可以在控制器内部获取ng-change事件，并在对象上执行简单的forEach。

<强> CODE

$scope.addType = function(){
   angular.forEach($scope.typeCheckBoxes, function(value, index) {
      if(value.val)
       console.log('value.id');//here you can get selected value
   });
}

<强>更新

实际上，您可以使用Angular $filter服务来过滤数组并获取已检查和取消选中的列表，从而获得所需的已检查/未检查标签的列表。然后为了获得标签，你需要做一个for循环。

<强> CODE

 $scope.$watch('typeCheckBoxes', function (newObj, oldObj) {
   var types, 
   checked = $filter('filter')(newObj, {'val': true}), //checked list
   unchecked = $filter('filter')(newObj, {'val': false}); //unchecked list
   console.log(checked);
   console.log(unchecked);
   for (var i=0; i< checked.length; i++) {
      types.push(checked[i].label); //adding checked labels to type array 
   }
}, true);

Working Fiddle

这会对你有所帮助，谢谢。

Answer 3

受 @jlouazel 建议的启发，我对$scope.$watch()方法进行了一些研究，我认为 更多Angular 即可。所以我提出了以下解决方案，该方案有效但缺乏直接获取复选框的灵活性。我必须使用for循环来检查复选框组中的哪个复选框被选中/取消选中。

$scope.$watch('typeCheckBoxes | filter: {val: true}', function(newObj, oldObj) {

    // checked ones
    for (var props in newObj) {
      console.log(newObj[props].label);
      types.push(newObj[props].label); //save the checked label
    }

    //unchecked ones
    for (var props in oldObj) {
      console.log('oldObj[' + props + '] =' + oldObj[props].label);
      types.splice(types.indexOf(oldObj[props].label, 1); // remove the unchecked label
    }
  }, true);

使用for循环查找选中的复选框非常麻烦。因此，我需要改进（，如果可能的话，）上面的代码直接获取已检查的代码而不是使用循环。任何建议将不胜感激。

谢谢！

AngularJS：跟踪选中的复选框

3 个答案: