【问题标题】:Angular ng-repeat multiple filter ORAngular ng-repeat 多重过滤器或
【发布时间】:2017-07-12 03:58:54
【问题描述】:

如何使用OR 上的多个过滤器过滤ng-repeat

<div ng-repeat="account in accounts | filter: searchText | filter: functionFilter" >
...
</div>

我希望 searchText 过滤所有字段并做到这一点,使用 functionFilter AND.

按照建议,我试过了

<div ng-repeat="account in accounts | filter: functionFilter || {value: searchText}" >
...
</div>

但似乎只适用于functionFilter

<div ng-repeat="account in accounts | filter: functionFilter ? '' : searchText" >
...
</div>

全部显示。

【问题讨论】:

  • 试用:filter: searchText || functionFilter
  • @Prera​​kSola,这样只适用于searchText
  • 什么是functionFilter?是自定义过滤器吗?
  • 只是一个在特定条件下返回truefalse的函数
  • 我认为您可以通过编写单个过滤器并在单个过滤器中执行两个过滤器操作来尝试

标签: angularjs filter angularjs-ng-repeat


【解决方案1】:

这很简单。为此制作一个通用功能。这里是searchText

HTML 内部...

<div ng-repeat="account in accounts | filter: searchText >
...
</div>

内部控制器...

我做了一个虚拟的例子。你必须根据你的情况来管理。

$scope.searchText = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

【讨论】:

  • 是的,正如我上面评论的那样,这是我的第一个选择,但我想知道是否有办法将更多过滤器与逻辑OR
【解决方案2】:

按照建议,您可以在 2 个过滤器之间使用 || 运算符。

我创建了一个示例fiddle 来测试场景。

注意

  • 最初,filterFunctionsearchText 两者都默认应用过滤器。
  • 当您将 seachText 值更改为 "Harry" 时,它只显示该结果。
  • 如果清除输入框,则仅应用filterFunction 过滤器。

【讨论】:

  • 如果我更改filerText 它不适用filterFunction 所以它不是一个合乎逻辑的OR,它类似于:应用filterFunction 如果filterText 为空但我需要申请filterFunction OR filterText 独立于每个状态
  • 如果你能提供一个 plunkr 或 fiddle 的例子并演示到底需要什么,那就太好了。
  • 我更新了您的jsfiddle.net/uwb2s9tb/3,如您所见,我想过滤这个,例如,使用值"t" 我需要维护项目101,因为在他的名字中有一个"t"还有项目102 因为functionFilter 返回true 并且他的名字有“t”,而不是我只有第二个元素(只会应用函数)你的例子只是因为函数过滤器像普通过滤器,默认过滤器在每个字段上检查值"101"
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-25
  • 1970-01-01
  • 2023-03-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多