在ng-repeat中使用多个参数的Angular过滤器。

10 浏览
0 Comments

在ng-repeat中使用多个参数的Angular过滤器。

我试图在ng-repeat中使用一个自定义过滤器来创建一个过滤器，该过滤器接收两个参数。同时，其中一个参数是重复对象的一个属性。\n所以在我的ng-repeat代码中，我有：\n

\n但它不起作用。如果我调试它，过滤器在第一个参数中收到了未定义的值。\n我已经阅读了文档: https://docs.angularjs.org/guide/filter\n我也阅读了SO中的多个相关问题\n

\n但是都没有成功。\n我创建了一个plunker，我们可以看到当我将其作为表达式使用时，过滤器的工作正常，所以问题可能是在ng-repeat语句中发送值的问题。\n这是plunker链接： \nhttp://plnkr.co/edit/IGvDBq?p=preview\n谢谢您的时间。

0

2 答案

0 Comments

问题的原因是当将bitwiseAnd过滤器与LimitTo过滤器结合使用时，过滤器无法正常工作。

解决方法是使用自定义过滤器来替代LimitTo过滤器，并在自定义过滤器中实现限制功能。以下是解决方法的代码示例：

app.filter('customLimitTo', function() {
  return function(input, limit) {
    if (!input) return [];
    if (limit > input.length) return input;
    return input.slice(0, limit);
  };
});

然后，在ng-repeat指令中使用自定义过滤器：

<tr ng-repeat="player in myTeam | customLimitTo: 5" ng-if="player.Flag | bitwiseAnd: type">

通过这种方式，可以同时使用bitwiseAnd过滤器和限制功能，从而解决问题。

0
0 Comments

多参数angular过滤器在ng-repeat中的问题是，myTeam | bitwiseAnd将bitwise过滤器应用于整个team数组，而不是应用于每个球员。所以，如果过滤器返回true，效果就像写了<tr ng-repeat="player in true">。你想要的是一个返回数组的过滤器。你可以创建自己的过滤器或使用filterfilter。后者与你的过滤器组合起来有点棘手，但是可以实现。首先在控制器中定义一个谓词函数：

$scope.bitwiseAnd = function(type) {
  return function(player) {
    return $filter('bitwiseAnd')(player.Flag, type);
  }
}

这个函数应用了你的bitwiseAnd过滤器，并且本身也应用于每个球员。然后你使用filterfilter与这个函数一起使用：

<tr ng-repeat="player in myTeam | filter:bitwiseAnd(type)>

Working Plunker

它起作用了！我考虑过类似的解决方案，但是我认为应该有一个更直接的解决方案。

0