数字范围的过滤器：AngularJS

我有一个带有一些输入类型的表单，如文本、广播等。当我提交表单时，它会在表单下方列出输入的详细信息（用于此的模板和指令）。我想在年龄中过滤，即数字输入类型，这样当我给出年龄范围时，它应该过滤具有相应年龄范围的配置文件。这是普朗克：

名称：{{formElement.Name}}

年龄：{{formElement.Age}}

您可以使用自定义过滤器选择功能执行此操作。在重复中，您可以做到：

<div  ng-repeat = "formElement in formElements | filter:filterAge">

以及控制器中的以下功能：

$scope.filterAge = function(val) {
  return (val.age > MIN_AGE && val.age < MAX_AGE);
};

$scope.filterAge=函数（val）{
返回值（值年龄>最小年龄和值年龄<最大年龄）；
};

---

但是，在您的情况下，所需的值（

MIN_AGE

和

MAX_AGE

）位于不同的指令和范围中。通过使用服务或将值存储在父作用域中并将引用传递到指令中，您可以将此值共享到正确的指令。

您可以编写一个自定义筛选函数，按特定字段的范围进行筛选：

$scope.byRange = function (fieldName, minValue, maxValue) {
  if (minValue === undefined) minValue = Number.MIN_VALUE;
  if (maxValue === undefined) maxValue = Number.MAX_VALUE;

  return function predicateFunc(item) {
    return minValue <= item[fieldName] && item[fieldName] <= maxValue;
  };
};

请注意，

filterModelMin.age

和

filterModelMax.age

可以直接在

fasterDisplay

指令中使用，因为

fasterForm

和

fasterDisplay

没有各自的作用域

---

示例plunker:

以扩展runTarm的答案。这将允许您将嵌套值与点运算符一起使用：

$scope.byRange = function (fieldName, minValue, maxValue) {
  if (minValue === undefined) minValue = Number.MIN_VALUE;
  if (maxValue === undefined) maxValue = Number.MAX_VALUE;

  return function predicateFunc(item) {
    var keys = fieldName.split('.');
    var val = item;
    for (var i = 0; i < keys.length; i++) {
      val = val[keys[i]];
    }

    return minValue <= val && val <= maxValue;
  };
};

$scope.byRange=函数（字段名、最小值、最大值）{
如果（minValue==未定义）minValue=Number.MIN\u值；
如果（maxValue==未定义）maxValue=Number.MAX\u值；
返回函数谓词函数（项）{
var keys=fieldName.split（'.'）；
var=项目；
对于（变量i=0；ireturn minValue这是我的解决方案，该解决方案效果更好，因为删除min和maxlikes输入后，将返回所有集合


$scope.byRange=函数（字段名、minLikes、maxLikes）{
if（minLikes===未定义| | maxLikes===未定义| | maxLikes===空| | minLikes==空）{
返回函数谓词函数二（项）{
返回项目[字段名]；
}
}否则{
返回函数谓词函数（项）{
return ming如果需要在
ngRepeat
上使用筛选器，则需要找到一种方法在指令之间共享
filterModel
对象（使用父作用域或服务）。但是请注意，将过滤逻辑与过滤器应用的显示逻辑分离是非常不寻常的。最好将过滤相关的内容放在
fasterDisplay
指令中。如果我有一个包含所有过滤器的对象，我能用这个函数吗？我正在编写一个应用程序，我将要筛选location和Agrange，可能还有更多筛选器。我将如何执行此操作？我的对象看起来如下：
$scope.eventsfilter={minAge:，maxAge:，postal:}
-因此minAge和maxAge都应匹配用户定义的范围。（因此，如果用户希望筛选21-27岁的事件，它也会匹配22-24岁的事件）。
<div ng-repeat="formElement in formElements | filter:byRange('age', filterModelMin.age, filterModelMax.age)">

$scope.byRange = function (fieldName, minValue, maxValue) {
  if (minValue === undefined) minValue = Number.MIN_VALUE;
  if (maxValue === undefined) maxValue = Number.MAX_VALUE;

  return function predicateFunc(item) {
    var keys = fieldName.split('.');
    var val = item;
    for (var i = 0; i < keys.length; i++) {
      val = val[keys[i]];
    }

    return minValue <= val && val <= maxValue;
  };
};

<div ng-repeat="formElement in formElements | filter:byRange('person.age', filterModelMin.age, filterModelMax.age)">