Question

我有一个如下所示的数组：

[
    {
    'age':5
    },

    {
    'age':12
    },

    {
    'age':51
    },
]

我使用ng-repeat列表显示数据，我希望能够使用带有整数比较的severl复选框来筛选列表，例如age = 5 < 0和age = 14 < 5。

之前我使用过复选框过滤器，但现在我似乎无法找到解决这个问题的方法..

我尝试过以下但没有运气：

.filter('five', function () {
  return function (input, age) {

    var output = [];

    if (isNaN(age)) {
        output = input;
    }

    else {
        angular.forEach(input, function (item) {
            if (item.age < 5) {
                output.push(item)
            }
        });
    }
    return output;
  }
})

结合：

<input type="checkbox" id="five" ng-model="fivemodel" ng-change="fivemodel = fivemodel ? true : undefined">
    <label for="five="> <5 yo </label>

<div ng-repeat="item in items | five"></div>

任何提示？

修改

请参阅Plunkr以供参考。

Answer 1

参见工作示例here

选中复选框将过滤年龄<= 5的结果;并取消选中将显示所有结果

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

  </head>

  <body ng-controller="wop">
    <input type="checkbox" id="five" ng-model="fiveFilter" >
    <label for="five="> 5 yo </label>

<div ng-repeat="item in data |five:fiveFilter">{{item.age}}</div>
  </body>

</html>
<script>
    // Code goes here

angular.module('test',[])

.controller('wop',['$scope', function($scope){

    // DEFINE DATE DEFAULTS
$scope.data = [
    {
    'age':5
    },

    {
    'age':12
    },

    {
    'age':51
    },
];



}])

.filter('five', function () {
  return function ( items,filter) {
      if(filter)return items.filter(x=>x.age<=5);
      else return items;
  }
})
</script>

Answer 2

我假设你需要一个年龄过滤器来过滤数组。不确定复选框如何帮助您实现此目的。我添加了2个文本框而不是复选框，并尝试执行相同的操作。这是html代码

 $scope.filterAge = function(obj) {

if ((!$scope.fromAge || $scope.fromAge === 0) 
&& (!$scope.toAge || $scope.toAge === 0)) {
  return true;
}

return obj.age >= ($scope.fromAge ? $scope.fromAge : 0) && 
obj.age <= ($scope.toAge ? $scope.toAge : 0);

}

这是js代码

handler = () => {...}

Link to jsfiddle

复选框过滤器使用AngularJS进行ng-repeat范围

修改

2 个答案: