AngularJS：跟踪选中了哪个复选框

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 操作。

代码

$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 服务来过滤数组并通过它来获取已检查和未检查列表，从而获得所需的checked/unchecked 标签列表。然后为了获得标签，你需要做一个 for 循环。

代码

 $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 循环来检查复选框组中的哪个复选框获得 checked/unchecked.

$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：跟踪选中了哪个复选框

AngularJS: tracking which checkbox is checked

javascript

checkbox

onchange

angularjs

angularjs-controller