javascript - 好奇 angularJs 是否有更好的方法来计算复选框的数量

Question

我需要检查是否选中了任何复选框。所以我这样做

self.isButtonEnabled = function() {
  var selectLineCheckboxs = document.getElementsByClassName('selectLineRadioInput'), 
  i = 0, checkboxLength = selectLineCheckboxs.length - 1;

  for (i = 0; i <= checkboxLength; i++) {
    if (selectLineCheckboxs[i].checked) {
      self.selectLineChecked = true;
      break;
    } else {
      self.selectLineChecked = false;
    }
  }
  return self.selectLineChecked;
};

作为返回，如果任何复选框被选中，我得到 true。

很简单，

现在我正在寻找我们是否可以通过任何更好的方法对 angularJs 做同样的事情，我不想在 Angular 中使用 watch() 函数。

Answer 1

我可以帮助您编写一些代码，将其转换为 Angular 方式。

1. 使用 angular.element(由 jQLite 提供以获取元素)代替 document.getElementsByClassName
2. 您可以在检查属性是否被选中时使用$filter

代码

self.isButtonEnabled = function() {
    var selectLineCheckboxs = angular.element('.selectLineRadioInput');
    var checkedValues = $filter('filter')(selectLineCheckboxs, { 'checked': true }); //do filtering and contains check value
    self.selectLineChecked = checkedValues.length > 0 ? true : false;
    return self.selectLineChecked;
};

注意:在使用$filter

之前，您应该在您的 Controller 上添加 $filter依赖

更新

我建议您创建自己的可用于多种用途的自定义过滤器，或者动态检查属性值是否为真。我知道您的代码与您在回答中提出的问题相同，但我将您的一些代码作为可重用组件放置，它可以动态地处理任何属性值以检查是否为真。

过滤器

.filter('isPropertyTrue', function () {
    return function (elements, property) {
        var returnArray = [];
        angular.forEach(elements, function (val, index) {
            if (val[property]) returnArray.push(val)
        });
        return returnArray;
    }
});

代码

$scope.isButtonEnabled = function () {
    var selectLineCheckboxs = document.getElementsByClassName('selectLineRadioInput');
    var checkedValues = $filter('isPropertyTrue')(selectLineCheckboxs, 'checked');
    self.selectLineChecked = checkedValues.length > 0 ? true : false;
    return self.selectLineChecked;
};

JSFiddle 希望对您有所帮助，谢谢。