Javascript 在ng repeat中将当前元素传递给自定义筛选器

是否可以将

ng repeat

的当前元素传递给自定义筛选器

以某种方式类似于此（HTML）：

我处理的数据如下（简化）：

所以基本上我有一个树状结构，在第一层，可能有一个或多个元素带有

“class”：“type”

。嵌套数据由Nick Perkins指令处理。 我只想显示包含

“监视的”：true

的元素。当然，问题是

“class”：“type”

的元素没有

wasted

属性

tl；dr

---

过滤掉

“watched”：false

，但保留带有

“class”的元素：“type”

不是在使用它时，而是可以将行作为一个整体单独使用

如果需要在

ng repeat

内容之前访问行的元素，则应为整个数组编写筛选器：

<ul>
  <li ng-repeat="row in rows | myFilter:anotherArgument"> ... </li>
</ul>

angular.module('myApp', []).filter('myFilter', function() {
  return function(items, anotherArgument) {
    // here you can access each argument as you like
    items.forEach(function(item) { 
      ...
    });
    return items;
  };
});

这样做的主要原因是，

行

不存在，直到您迭代数组，并且数组本身是整个过滤器链的结果。将数组想象成这样：

ng-repeat="row in (row | filter1 | filter2 | ...)"

angular.module('myApp', []).filter('mySpecificFilter', function() {
  return function(items) {
    return items.filter(function(element) {
      return element.watched || element['class'] === 'type';
    }
  }
});

但是根据

myFilter

的用途，您可能只想在repeat本身的内容中应用该过滤器

<ul>
  <li ng-repeat="row in rows">
    {{row | myFilter:anotherArgument}}
  </li>
<ul>

---

这么做有什么不对

<ul>
    <li ng-repeat="row in rows">{{row | myFilter:anotherArgument}}</li>
</ul>

{{row|myFilter:anotherArgument}

以下是一个示例：

请注意，筛选器的第一个参数是“数据源”（整个列表）。过滤器的目的是过滤数据源

HTML示例

<ul ng-controller="myCtrl">
    <li ng-repeat="row in friends |myFilter:2:5 ">{{row.name}}</li>
<ul>

---

实际上，我正试图在第三方指令的模板内完成所有这些。我会在调用指令的应用程序部分的控制器中准备数组，还是在指令本身中添加调整更有意义？（我一直在更改指令模板）您是否介意多告诉我一点您希望通过过滤器实现的功能？也许有一个简单的解决办法。我在原来的问题中添加了更多的细节。更新了我的答案。如果您只关注该组合（

wasted

或

class=='type'

），它应该可以工作，但您当然可以使用更多自定义参数来调整它。请记住，自定义筛选器的返回值就是您在

ng repeat

中使用的值。筛选器的第一个参数不是特别错误，而是不必要的，因为左侧将作为第一个参数传递给筛选器。

angular.module('myApp', []).filter('mySpecificFilter', function() {
  return function(items) {
    return items.filter(function(element) {
      return element.watched || element['class'] === 'type';
    }
  }
});

<ul>
    <li ng-repeat="row in rows">{{row | myFilter:anotherArgument}}</li>
</ul>

<ul ng-controller="myCtrl">
    <li ng-repeat="row in friends |myFilter:2:5 ">{{row.name}}</li>
<ul>

var myApp = angular.module('myApp',[]);

myApp.filter('myFilter', function() {
        return function(items, begin, end) {                                     

            return items.slice( begin, end);
        }
    });

function myCtrl($scope)
{    
    $scope.friends = [
      {name:'John', age:25, gender:'boy'},
      {name:'Jessie', age:30, gender:'girl'},
      {name:'Johanna', age:28, gender:'girl'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Peter', age:95, gender:'boy'},
      {name:'Sebastian', age:50, gender:'boy'},
      {name:'Erika', age:27, gender:'girl'},
      {name:'Patrick', age:40, gender:'boy'},
      {name:'Samantha', age:60, gender:'girl'}
    ];
}