ng-repeat 中的 angularJS 过滤器表达式答案

【问题标题】：angularJS filter expression in ng-repeatng-repeat 中的 angularJS 过滤器表达式
【发布时间】：2014-05-02 12:27:55
【问题描述】：

我想知道实现这一点的最优雅和最简单的方法是什么。我需要为 ng-repeat 添加一个过滤器表达式，该表达式将从一个属性中过滤 2 个条件。

在这个例子中http://plnkr.co/edit/OMQxXvSjtuudMRGE4eZ8?p=preview

如果你输入A，它会显示A的复选框，
输入 B - 显示 B 的复选框。

但我想显示指定的复选框以及任何带有空条件的内容。 C没有条件，所以：

如果输入A，我想同时显示A和C复选框，
输入 B，我想同时显示 B 和 C 复选框。

【问题讨论】：

标签： javascript angularjs checkbox angularjs-ng-repeat

【解决方案1】：

我会创建自定义过滤器，例如：

app.filter('myfilter', function() {
   return function( items, condition) {
    var filtered = [];

    if(condition === undefined || condition === ''){
      return items;
    }

    angular.forEach(items, function(item) {          
       if(condition === item.condition ||  item.condition === ''){
         filtered.push(item);
       }
    });

    return filtered;
  };
});

及用法：

<span ng-repeat="charge in charges  |  myfilter:level.condition">

查看Plunker中的演示

它看起来非常优雅和清晰。

希望对你有帮助

【讨论】：

【解决方案2】：

我认为你可以很容易地做到这一点，只需像这样在你的范围内使用过滤器表达式函数；

$scope.filterExpression = function(charge) {
  return (!$scope.level || !charge.condition || 
          ($scope.level.condition.toUpperCase() === charge.condition.toUpperCase()));
}

然后这样称呼它；

<span ng-repeat="charge in charges | filter:filterExpression">

plunkr（已更正）

【讨论】：

这个过滤器可以工作，但请记住它很难调试。
怎么样？它的优点是可以将与模型相关的代码保存在控制器中。
我谈谈你实现过滤器的风格。无论如何，我认为将过滤器编写为单独的模块是一种很好的做法，
原则上我并不反对，但我认为这取决于该过滤器的通用性或可重用性。此实现显然与控制器中使用的模型耦合，因此我的偏好是将代码作为方法包含在控制器上。
我同意将过滤器编写为单独的模块是一种很好的做法，但我真的很想知道“简单”的方式，这意味着当我不担心可重用性时代码量最少。

【解决方案3】：

你可以使用： data-ng-repeat="charge in charge | filter:searchText" data-ng-if="filter = searchText.Name"

【讨论】：

现在，这里有一些你每天都看不到的魔法！谢谢。

【解决方案4】：

使用两个 ng-repeats，一个接一个：

1st : 过滤选中复选框并且有条件的任何内容

2nd : 过滤没有条件的东西

【讨论】：