在AngularJS中使用单个输入过滤多个字段

我有一个JSON对象，如下所示

[{
    "id": 1,
    "firstName": "Jennifer",
    "middleName": null,
    "lastName": "Aniston",
    "address": "New York City",
}, {
    "id": 2,
    "firstName": "Angelina",
    "middleName": null,
    "lastName": "Jolie",
    "address": "Beverley Hills",
}, {
    "id": 3,
    "firstName": "Emma",
    "middleName": null,
    "lastName": "Watson",
    "address": "London",
}]

我正在使用ng repeat填充视图中的数据

<td ng-repeat="row in list | filter:filterBeauties">
{{row.firstName}} {{row.lastName}}
</td>

{{row.firstName}{{row.lastName}}

现在我有一个输入框，我想用它来过滤这些名字。我想使用相同的输入框来过滤firstName，然后过滤lastName，不过滤任何其他内容（例如地址）

---

你知道我怎样才能做到吗

您可以将第三个参数传递给filter函数：

$filter('filter')(list, {'firstName':search});

我会做如下的事情：

<input type="text" ng-model="search">
<table border="1">
    <tr ng-repeat="row in list | filterBoth:search">
        <td>{{row.firstName}} {{row.lastName}}</td>
    </tr>
</table>

演示：

---

唯一的问题是，当您连接两个类似的数组时，您会得到重复的行，可以使用

.uniq

下划线.js方法轻松修复这些行。

好的，这就是我所做的解决方法

我在json对象中添加了一个新项（使用函数）并进行过滤

$scope.list = beauties.query(function(response) {
    angular.forEach(response, function(value, key) {
          var fullName = value.firstName + ' ' + value.lastName;
          $scope.list[key].fullName = fullName;
   });
});

输入框代码：

<input type="text" placeholder="Filter" ng-model="filterBeauties.fullName">

ng重复

<td ng-repeat="row in list | filter:filterBeauties">
{{row.firstName}} {{row.lastName}}
</td>

{{row.firstName}{{row.lastName}}

试试这个

基本上，我创建了一个子结构，用于在显示的数据结构中进行过滤，并仅对该属性进行过滤（例如“filterTerms”）：

HTML:

对于这种情况，您可以将所有名称放在一个字段中，从而进一步简化此过程（请参见fiddle:

HTML:

---

考虑到您的用户有此表单：

{
  "id": 2,
  "firstName": "Angelina",
  "middleName": null,
  "lastName": "Jolie",
  "address": "Beverley Hills"
}

如果您想同时按某个用户的名字、姓氏或两者来搜索该用户，则需要将其合并在一起

$scope.query = '';

$scope.search = function (user) {
  var query = $scope.query.toLowerCase(),
  fullname = user.firstName.toLowerCase() + ' ' + user.lastName.toLowerCase();

  if (fullname.indexOf(query) != -1) {
    return true;
  }
  return false;
};

如果当前用户满足您的查询，此函数将返回

true

，如果不满足则返回

false

。在函数内部，我建议将您的查询设置为小写，这样您就不必处理用户在搜索输入中输入的大写字母

以下是HTML：

<input type="text" placeholder="Search" ng-model="query">
<table>
   <tr ng-repeat="user in users | filter:search">
      <td>{{user.firstName}} {{user.lastName}}</td>
   </tr>
</table>

{{user.firstName}{{user.lastName}}

---

这项技术只有在您尝试搜索

Angelina-Jolie

、

Angelina

、

Jolie

甚至

InA-Jolie

（为什么不呢？）时才起作用。如果您尝试先搜索姓氏，如

Jolie-Angelina

，则不会起作用。您可以通过在函数中创建第二个全名来轻松修复它（例如，

ReverseFileName

），首先输入姓氏，然后输入姓氏，并像测试第一个全名字符串一样进行测试。

尝试

角度过滤器

库，而不是编写复杂的过滤器。

搜索字段

过滤器在这里很有用

控制器

$scope.users = [
  { first_name: 'Sharon', last_name: 'Melendez' },
  { first_name: 'Edmundo', last_name: 'Hepler' },
  { first_name: 'Marsha', last_name: 'Letourneau' }
];

HTML

<input ng-model="search" placeholder="search by full name"/>
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
  {{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->

{{user.first_name}{{user.last_name}}

---

祝你好运。

（姓和名）还是你想要（姓或名）firstName和lastName。因此，如果我在输入框中键入Jennifer Aniston，它必须过滤到Jennifer Aniston。好的，我认为这只能通过编写一个自定义过滤器来完成-因为您需要解析输入查询参数…我理解您想要做什么，但从架构的角度来看，我建议在您的视图中使用firstName和lastName你的搜索模型在上面吗。@克丽丝托里，你的意思是我应该改变后端吗？嗨，你共享的JSFIDLE并没有按照我想要的方式工作。如果你写“詹妮弗·安妮斯顿”在输入框中，它不会在result.Oh中返回任何内容。在这种情况下，您必须按空格分割搜索，分别过滤每个单词，对结果进行分组，使其唯一，最后更新范围。当前的演示足以让您按照您的期望继续探索。这不起作用。请检查您的JSFIDLE。如果我键入

Ang

我只能看到Angelina而不是Aniston。我认为Ang不应该匹配Aniston。但是An也不返回Aniston。看起来姓氏没有被过滤在小提琴中。这并不是它应该的方式。它也会过滤地址，即使这不是想要的行为。它的就像为列表创建一个

索引一样。好主意。谢谢。这是上面解决方案的Plunker，或者试试这个[Plunker][
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.list = [{
        "id": 0, "first": "Jenny", "last": "Sorenson", "address": "123 W. Wallnut St.",
        "filterTerm": "Jenny Sorenson"
    },{
        "id": 0, "first": "Susan", "last": "Hinkle", "address": "456 W. Doorbell Dr.",
        "filterTerm": "Susan Hinkle"
    },{
        "id": 0, "first": "Rachel", "last": "Karlyle", "address": "789 W. Sunset Blvd.",
        "filterTerm": "Rachel Karlyle"
    },{
        "id": 0, "first": "Gwen", "last": "Lippi", "address": "0 W. Silly Cir.",
        "filterTerm": "Gwen Lippi"
    }]
}

{
  "id": 2,
  "firstName": "Angelina",
  "middleName": null,
  "lastName": "Jolie",
  "address": "Beverley Hills"
}

$scope.query = '';

$scope.search = function (user) {
  var query = $scope.query.toLowerCase(),
  fullname = user.firstName.toLowerCase() + ' ' + user.lastName.toLowerCase();

  if (fullname.indexOf(query) != -1) {
    return true;
  }
  return false;
};

<input type="text" placeholder="Search" ng-model="query">
<table>
   <tr ng-repeat="user in users | filter:search">
      <td>{{user.firstName}} {{user.lastName}}</td>
   </tr>
</table>

$scope.users = [
  { first_name: 'Sharon', last_name: 'Melendez' },
  { first_name: 'Edmundo', last_name: 'Hepler' },
  { first_name: 'Marsha', last_name: 'Letourneau' }
];

<input ng-model="search" placeholder="search by full name"/>
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
  {{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->