фильтровать несколько полей, используя один ввод в AngularJS

Попробуйте эту скрипту.

По сути, я создал подструктуру для фильтрации в отображаемой структуре данных и фильтрации только по этому свойству (например, «filterTerms»):

HTML:

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

JavaScript:

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.list = [{
    "id": 1,
    "address": "New York City",
    "firstName": "Jennifer",
    "middleName": null,
    "lastName": "Aniston",
    "filterTerms": {
        "firstName": "Jennifer",
        "middleName": null,
        "lastName": "Aniston",
    }
}, {
    "id": 1,
    "address": "New York City",
    "firstName": "Jennifer",
    "middleName": null,
    "lastName": "Leela",
    "filterTerms": {
        "firstName": "Jennifer",
        "middleName": null,
        "lastName": "Leela",            
    }
}, {
    "id": 2,
    "address": "Beverley Hills",
    "firstName": "Angelina",
    "middleName": null,
    "lastName": "Jolie",
    "filterTerms": {
        "firstName": "Angelina",
        "middleName": null,
        "lastName": "Jolie",            
    }
}, {
    "id": 3,
    "address": "London",
    "firstName": "Emma",
    "middleName": null,
    "lastName": "Watson",
    "filterTerms": {
        "firstName": "Emma",
        "middleName": null,
        "lastName": "Watson",            
    }
}];
}

Вы можете упростить это еще больше для этого случая, поместив все имена в одно поле (см. fiddle здесь):

HTML:

<div ng-controller="MyCtrl">
    <input type="text" ng-model="search.filterTerm" />
    <table border="1">
        <tr ng-repeat="row in list | filter:search">
            <td>{{row.first}} {{row.last}} {{row.address}}</td>
        </tr>
    </table>
</div>

JavaScript:

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;
};

Эта функция вернет 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>

Эта техника будет работать, только если вы попытаетесь найти Angelina Jolie, Angelina, Jolie или даже InA JOLIe (почему бы и нет). Если вы попытаетесь сначала выполнить поиск по фамилии, например Jolie Angelina, это не сработает. Вы можете легко исправить это, создав второе полное имя в своей функции (например, reverseFullname), объединив сначала lastName, а затем firstName и протестировав его так же, как и первую строку полного имени.

Итак, вот что я сделал, чтобы решить эту проблему.

Я добавил новый элемент в объект json (используя функцию angular.forEach) и фильтруется по нему.

$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">

нг-повторить

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

Вы можете передать третий аргумент функции фильтра:

$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>

А затем напишите пользовательский фильтр как:

myApp.filter('filterBoth', function($filter) {
  return function(list, search) {
    if (!search) return list;

    var arrSearch = search.split(' '),
        lookup = '',
        result = [];

    arrSearch.forEach(function(item) {
      lookup = $filter('filter')(list, {'firstName': item});console.log(lookup);
      if (lookup.length > 0) result = result.concat(lookup);
    });

    return result;
  };
});

Демонстрация: http://jsfiddle.net/wAp4S/1/

Единственная проблема заключается в том, что вы получите повторяющиеся строки, поскольку вы объединяете два похожих массива, которые можно легко исправить с помощью метода _.uniq underscore.js.

Попробуйте использовать библиотеку angular-filter вместо написания сложных фильтров. Здесь может помочь фильтр searchField.

https://github.com/a8m/angular-filter

КОНТРОЛЛЕР

$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 -->

Удачи.