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

Question

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

文档说你可以指定这样的表达式:{{ filter_expression |过滤器:表达式:比较器}}
并且使用两个参数调用比较器函数，数组中的实际对象和谓词值。我的比较器函数对于实际对象始终具有“未定义”。我尝试使一切尽可能简单，但它仍然为实际对象发送 undefined 。

$scope.athletes = [
    {
      "name":"first",
      "tags":[
      "Offense"]
    },
    {
      "name":"two",
      "tags":[
      "Defense"]
    },
    {
      "name":"three",
      "tags":[
      "Special Teams"]
    },
    {
      "name":"four",
      "tags":[
      "Offense"]
    }
    ];

    $scope.athletesInFunction = [];

    $scope.doesAthleteHaveTag = function(athlete,filterValue){
      if (athlete) {
      $scope.athletesInFunction.push(athlete);
      if (athlete.tags.indexOf(filterValue) > -1) {
        return true;
      }
      }
      return false;
    };

HTML文件:

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

示例plunkr在这里:
https://plnkr.co/edit/lk26tFFgux2sLpuke56m?p=preview

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

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

Answer 1

为了创建一个接受参数的自定义 AngularJs 过滤器，您需要将其定义为过滤器 like this .这个想法很简单:过滤器返回数组的过滤版本(这样，您不会因为对您正在观察的根数组进行大量更改而破坏摘要循环)。

在你的情况下:

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 以使用过滤后的数组。

因为我的大多数过滤器都非常“特定于 Controller ”——我倾向于使用过滤后的数组作为我的 ng-repeat 源。

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

这种方法让我可以在 Controller 级别自己控制缓存……而且我发现它更容易阅读/维护(因为 AthletesByRole() 是 Controller 内部的一个函数，而不是我在一些随机“其他”js 文件中的过滤函数必须在它写完 6 个月后追查)......只是一个额外的想法要考虑。