Question

我正在尝试使用带有ng-repeat的自定义过滤器功能，因为我的过滤器值是一个复杂的对象。我正在使用angularJS v1.5并遵循此处的文档：https://code.angularjs.org/1.5.0/docs/api/ng/filter/filter

文档说你可以指定一个这样的表达式：{{filter_expression | filter：表达式：比较器}} 并且使用两个参数调用比较器函数，即数组中的实际对象和谓词值。我的比较器功能始终具有未定义的＆＃39;对于实际的对象。我尝试使一切尽可能简单，但它仍然以未定义的形式发送给实际对象。

<div ng-repeat="athlete in athletes | filter:filterValue:doesAthleteHaveTag">
        <div>Name: {{athlete.name}}</div>
      </div>

HTML文件：

<add name="DynamicConnection" connectionString="Server=DefaultServer;Initial Catalog=I3_IC;User ID=defaultUser; Password=defaultPassword;" providerName="System.Data.SqlClient" />

示例plunkr： https://plnkr.co/edit/lk26tFFgux2sLpuke56m?p=preview

我做错了什么？如何让它在实际的数组对象中发送以进行过滤？

编辑：我应该更清楚我的问题。我的问题是文档是否有效，以及使用自定义过滤器功能的推荐方法是什么。我目前只使用表达式函数，因为过滤谓词是范围广泛的变量，我可以在我的表达式函数中轻松访问它。我不知道这是否比使用比较器功能更好，更差或相同，或者如果最好只编写其中一个答案中提到的自定义过滤器。

Answer 1

要创建接受参数的自定义AngularJs过滤器，您需要将其定义为过滤器like this。这个想法很简单：过滤器返回你的数组的FILTERED版本（这样，你不会通过对你正在观察的根数组进行大量更改来破坏摘要周期。）

在你的情况下：

<强> 1。创建过滤器

app.filter('hasTag', function() {
  return function(items, tagName) {
    var filtered = [];
    angular.forEach(items, function(el) {
      if(el.tags && el.tags.indexOf(tagName)>-1) {
        filtered.push(el);
      }
    });
    return filtered;
  }
});

<强> 2。更改过滤器参数

<div ng-repeat="athlete in athletes | hasTag:'Defense'">

应该这样做。

选项＃2 - 更改ng-repeat以使用过滤后的数组。

因为我的大部分过滤器都非常特定于控制器＆＃34; - 我倾向于使用过滤后的数组作为我的ng-repeat源。

<div ng-repeat="athlete in AthletesByRole('Defense')">

这种方法让我自己在控制器级别控制缓存......我发现它更容易阅读/维护（因为AthletesByRole（）是控制器内部的一个功能，而不是一些随机的过滤功能＆＃34;其他＆＃34; js文件，我必须在写完后6个月跟踪）...只是一个额外的想法考虑。

如何为ng-repeat指定自定义过滤器功能？

1 个答案: