ng-repeat 中范围的复选框过滤器 AngularJS

Question

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

[
    {
    'age':5
    },

    {
    'age':12
    },

    {
    'age':51
    },
]

我使用 ng-repeat 列表显示数据，我希望能够使用带有整数比较的多个复选框过滤列表，例如 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

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

 <label>Age From: </label>
<input type="text" ng-model="fromAge">
<label>Age To: </label>
<input type="text" ng-model="toAge">

<ul ng-repeat="item in data | filter: filterAge">
  <li>
    {{item.age}}
  </li>
</ul>

这里是js代码

 $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);

}

Link to jsfiddle

Answer 2

查看工作示例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>

ng-repeat 中范围的复选框过滤器 AngularJS

Checkbox filter for range in ng-repeat with AngularJS

javascript

angularjs

angularjs-ng-repeat

angularjs-filter

编辑