Angularjs 如何为ng repeat指定自定义筛选函数?

Angularjs 如何为ng repeat指定自定义筛选函数?,angularjs,Angularjs,我正在尝试使用一个带有ng repeat的自定义筛选函数,因为我的筛选值是一个复杂的对象。我正在使用angularJS v1.5,并遵循以下文档: 文档说您可以指定如下表达式:{{filter_expression}filter:expression:comparator} 使用两个参数调用comparator函数,即数组中的实际对象和谓词值。我的比较器函数对于实际对象总是“未定义”。我试着使一切尽可能简单,但它仍然发送未定义的实际对象 $scope.athletes = [ {

我正在尝试使用一个带有ng repeat的自定义筛选函数,因为我的筛选值是一个复杂的对象。我正在使用angularJS v1.5,并遵循以下文档:

文档说您可以指定如下表达式:{{filter_expression}filter:expression:comparator} 使用两个参数调用comparator函数,即数组中的实际对象和谓词值。我的比较器函数对于实际对象总是“未定义”。我试着使一切尽可能简单,但它仍然发送未定义的实际对象

$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>

姓名:{{运动员.姓名}
此处的示例:

我做错了什么?如何让它将实际数组对象发送到过滤器中


编辑:我应该更清楚地回答我的问题。我的问题是这些文档是否有效,以及使用自定义筛选函数的推荐方法是什么。我现在只使用表达式函数,因为过滤器谓词是一个范围广泛的变量,我可以在表达式函数中轻松访问它。我不知道这是更好还是更差,或者与使用比较器函数相同,或者只编写一个自定义筛选器(如其中一个答案中所述)更好。

为了创建一个接受参数的自定义AngularJs筛选器,需要将其定义为筛选器。想法很简单:过滤器返回数组的过滤版本(这样,您就不会因为正在观察的根数组的大量更改而破坏摘要周期)

就你而言:

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;
  }
});
<div ng-repeat="athlete in athletes | hasTag:'Defense'">
2。更改过滤器参数

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;
  }
});
<div ng-repeat="athlete in athletes | hasTag:'Defense'">

应该这样做

选项#2-将ng repeat更改为使用过滤数组。

因为我的大多数过滤器都是“特定于控制器的”——我倾向于使用过滤后的数组作为ng repeat源

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


这种方法可以让我自己在控制器级别控制缓存。。。而且我发现它更易于读取/维护(因为AthletesByRole()是控制器中的一个函数,而不是我在编写6个月后必须跟踪的某个随机“其他”js文件中的一个过滤函数)。。。只是一个额外的想法要考虑。此格式:{{filter_expression{124; filter:expression:comparator}},实际上不作为筛选数组的有效方式存在?文档是。。。失望。我想,当它说“过滤器”时,它的意思是“在你的angular应用程序中定义为过滤器的函数”。有人能帮我解决这个问题吗@Mawg——您可以最小化控制器中的开销(例如缓存过滤的项),所以这是一件好事。但最终,这两种实现都只是由您控制的代码。。。所以我认为它不是关于速度,而是关于代码的可读性。另外,请记住-因此您希望限制您的dom元素呈现!