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

您缺少的第一件事是，您应该在范围内编写 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 服务来过滤数组并通过它获取已选中和未选中的列表，从而获得所需的选中/未选中标签列表。然后为了到达那里标签你需要做一个 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 2

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

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

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

因为您的复选框的 id 是标签，所以您也会在 newObject 中拥有它。

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循环来查找选中的复选框确实很麻烦。所以，我需要改进（如果可能的话）上面的代码直接得到检查的代码，而不是使用循环。任何建议将不胜感激。

谢谢！