如何在 angular.js 中动态应用自定义过滤器？答案

【问题标题】：How to dynamically apply custom filters in angular.js?如何在 angular.js 中动态应用自定义过滤器？
【发布时间】：2016-05-16 23:58:28
【问题描述】：

我知道在 Angular 中，使用 ng-repeat 应用自定义过滤器看起来像这样：

ng-repeat="request in allRequests | allRequests"

但我有几个不同的过滤器。例如。

 allFutureRequests, allPastRequests, myPastRequests, group1FutureRequests

我希望更换“allRequests”过滤器并将其动态替换为任何其他过滤器，具体取决于用户单击的某些按钮。

我该怎么做呢？

【问题讨论】：

一个初始的（朴素的）实现是使用ng-if 多次声明ng-repeat，该ng-if 根据所选单选按钮显示适当的。更好的方法是制作一个包含所有过滤器的函数，并在 if else 块中使用过滤器按钮的 ng-model 值，然后根据值使用适当的过滤器。我不确定您想要的是否可行，但如果不是，后一种选择值得一试。

【解决方案1】：

最简单的方法是在控制器中执行此操作。 This question 总结得很好。

格式为$filter('filtername')(argument)

如果您想在点击按钮时添加过滤器，请执行以下操作：

$scope.onBtnClick = function(index) {
    $scope.allRequests[index] = $filter('allFutureRequests')($scope.allRequests[index]);
}

您可以通过如下点击调用它：

<button ng-repeat="request in allRequests | allRequests" ng-click="onBtnClick($index)">

上面只是将allRequests 数组/对象的索引传递给函数。然后该函数将该过滤器应用于其中的特定索引。

另外，不要忘记将$filter 注入到您的控制器中。

【讨论】：

嗨，工作示例并没有真正起作用。也许是错误的链接？否则，我想我明白该怎么做了。非常感谢！给其他人阅读的一张便条。如果项目的顺序以任何其他方式排序，$index 可能无法按预期工作。
@Synia - 是的错误链接抱歉。已将其更新为工作链接。一探究竟。如果您有任何问题，请告诉我。 track by 可能是可选的，尽管通常是推荐的。尝试使用唯一标识符，例如 ID 或 GUID。我经常使用track by 来加快我的应用程序的性能。