Angular - 实时应用过滤器答案

【问题标题】：Angular - applying filter in real timeAngular - 实时应用过滤器
【发布时间】：2015-07-29 05:58:07
【问题描述】：

我有一个对象数组：

[{
  name: "test",
  type: 0,
  speed: 50
}, {
  name: "test2",
  type: 4,
  speed: 10
}, {
  name: "test3",
  type: 4,
  speed: 67
}, {
  name: "test4",
  type: 2,
  speed: 40
}]

我想用 ng-repeat 显示数组..
到这里一切都很简单......

但现在我想添加几个按钮，每个按钮都会用其他参数过滤数组...
例如：

按钮一：只显示速度大于X的物体，
按钮二：仅显示类型为 Y..
的对象等等……

我现在如何使用角度滤镜，但我不明白如何使用它来满足我的需求...

非常感谢！

【问题讨论】：

您使用的是哪个版本的 Angular？
这似乎类似于 angularjs 文档在此处使用 ng-repeat 和 filter 描述的方式：link

标签： javascript angularjs filtering

【解决方案1】：

最适合您的解决方案是使用名为filter 的过滤器。它可以在参数中接受自定义过滤功能。

HTML

<div ng-repeat="item in items|filter:filterItem"></div>

然后你应该在你的控制器中定义函数filterItem：

// assume that first button sets `$scope.hideSlow` flag and the second `$scope.showType` respectively
$scope.filterItem = function(item) {
    return (!$scope.hideSlow || item.speed > X) &&
       (!$scope.showType || item.type === Y);
}

您可以在此函数中添加额外的过滤逻辑，但不要忘记对其编写测试以确保您的函数正确过滤

【讨论】：

但是当用户点击按钮时如何更改过滤器？
您的过滤功能将自动应用于每个摘要

【解决方案2】：

我可能会建议创建一个自定义过滤器来检查模型以确定过滤器的结果集。将按钮绑定到范围上的方法以从过滤器中进行检查。

https://docs.angularjs.org/tutorial/step_09

【讨论】：