AngularJS过滤问题：基于下拉框或输入框筛选name/account_name

嘿，我来帮你搞定这个过滤的问题～ 你现在的需求是要么让输入框同时匹配name和account_name两个字段，要么能通过下拉选择具体过滤哪个字段，这两种方案都能实现，我给你拆解下步骤：

方案一：输入框同时搜索两个字段（推荐） #

你之前的问题出在把搜索模型拆成了searchName.name和searchName.account_name，还叠加了两个filterBy（这会变成AND逻辑，要求两个字段都匹配）。其实用angular-filter的filterBy可以直接指定多个字段，实现OR逻辑（只要其中一个字段匹配就显示），步骤如下：

1. 修改输入框的ng-model：把模型改成一个单一变量，比如searchQuery，这样输入的内容会统一用来匹配两个字段：

<input type="text" placeholder="Search" ng-model="searchQuery">

2. 简化过滤逻辑：在md-card和表格的ng-repeat里，把多次filterBy合并成一次，指定要匹配的两个字段：

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

<!-- 表格的ng-repeat -->
<tr ng-repeat="container in account | filterBy: ['name', 'account_name']: searchQuery">

这样不管输入的内容是匹配name还是account_name，对应的条目都会被筛选出来。

方案二：添加下拉菜单选择过滤字段 #

如果需要让用户选择按哪个字段过滤，可以加一个下拉框，步骤如下：

1. 添加下拉选择框：绑定一个selectedField模型，提供name和account_name两个选项：

<select ng-model="selectedField" ng-init="selectedField='name'">
  <option value="name">按名称过滤</option>
  <option value="account_name">按账户名称过滤</option>
</select>
<input type="text" placeholder="Search" ng-model="searchQuery">

2. 动态指定过滤字段：在filterBy里用[selectedField]来动态绑定选中的字段：

<!-- md-card的ng-repeat -->
<md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" 
          ng-show="(containers | groupBy: 'accountId' | filterBy: [selectedField]: searchQuery).length > 0" 
          ng-repeat="account in containers | groupBy: 'accountId' track by $index | filterBy: [selectedField]: searchQuery">

<!-- 表格的ng-repeat -->
<tr ng-repeat="container in account | filterBy: [selectedField]: searchQuery">

这样用户选哪个字段，输入框就只会匹配该字段的内容。

额外说明 #

• 你用到的filterBy是angular-filter库提供的过滤器（不是AngularJS原生的filter），确保你的项目已经引入了这个库哦。
• 如果用原生AngularJS的filter，也可以实现类似效果，比如自定义一个过滤器，但filterBy已经帮我们封装好了多字段匹配的逻辑，用起来更方便。

内容的提问来源于stack exchange，提问作者Asim