javascript - 基于下拉列表的搜索条件 - AngularJS 过滤器

Question

我有一个关于 filter 的问题搜索示例名称。这在 ng-repeat 上很容易实现。

我遇到的问题实际上是我想根据 name 进行过滤或 account_name (两个不同的实体)。

我尝试的是让我的输入框同时过滤 name和 account_name但没有成功。我所做的是:

<input type="text" placeholder="Search" ng-model="searchName.name">

<md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" ng-show="(account|filter:searchName).length > 0"
             ng-repeat="account in containers | groupBy: 'accountId' track by $index | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name">

 <md-toolbar>
            <div class="md-toolbar-tools" ng-repeat="container in account | limitTo: 1">
                <h1 class="md-display-3"> <a href="{{container.tagManagerUrl}}">{{container.account_name}}</a></h1>
            </div>
        </md-toolbar>

(.... some code that is not important)

//table start
 <tr ng-repeat="container in account | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name">

所以我有:
1)输入框(搜索框)
2) <md-card>在 ng-repeat 上使用
3) <md-toolbar>与 md-card 相关联，但我也必须在这里运行 ng-repeat
4) 带有显示条目的 ng-repeat 表。

这是我试过的线路:

filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name

但我不能在输入字段中声明 ng-model="searchName.name && searchName.account_name"这会引发错误

我想尝试的解决方案是有一个下拉菜单，我可以在其中选择按name进行过滤或 account_name看起来像这样:

如果可以仅在输入字段中同时按帐户名和名称进行搜索，那会很好，否则就是这种方式。希望您能帮助我前进并指导我了解我需要什么以及如何做(不需要您完成所有工作)。

谢谢

Answer 1

可以通过 account_name 和 name 进行搜索，您可以将一个对象传递给您的过滤器。

<input type="text" placeholder="Search" ng-model="search.name">
<input type="text" placeholder="Search" ng-model="search.account_name">
<tr ng-repeat="container in account | filter:{name: search.name, account_name: search.account_name}>
</tr>

您也可以为此使用自定义过滤器，

js

  $scope.customFilter = function(row){   
    if($scope.Search == undefined || $scope.Search == "")
      return true;
    else if(row.name.indexOf($scope.Search) !== -1 || row. account_name.indexOf($scope.Search) !== -1)
      return true;
    else 
      return false;
  }

html

<tr ng-repeat="container in account | filter:customFilter>
</tr>

Demo