Как фильтровать несколько полей в AngularJS ng-repeat

Я создаю сайт с поиском, используя фильтр запросов в AngularJS. Я нашел много руководств о том, как реализовать этот поиск в одном поле, но ни одно из них не объясняет, как выполнять поиск по нескольким полям. Итак, если в ваших данных есть имя: «Джон», фамилия: «Смит», я хотел бы иметь возможность ввести «Джон Смит» в строку поиска и найти правильные результаты, но только точный текст «Джон» или « Смит» работает.

<div ng-include="'partials/navbar.html'"></div>
<div class="container" ng-controller="ResListCtrl">
    <div class="row">
        <div class="col-md-2">
            Search: <input ng-model="query">
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-10">
            <ul ng-repeat="reservation in reservations | filter:query">
                <li><a href="#">{{reservation.firstName}} {{reservation.lastName}}</a></li>
                <p>{{reservation.resort}}</p>
            </ul>
        </div>
    </div>
</div>

filter angularjs angularjs-filter
person mofitty    schedule 18.11.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Согласно угловым документам, похоже, вы можете передать объект фильтру. Таким образом, вы можете сделать что-то вроде:

scope.query = {};

Затем в вашем html

First name: <input ng-model="query.firstName" />
Last name: <input ng-model="query.lastName" />

И ваше выражение фильтра останется прежним:

ng-repeat="reservation in reservations | filter:query"

Для получения дополнительной информации см. сведения об аргументе «выражение»: https://docs.angularjs.org/api/ng/filter/filter.

person Andy Rheingans    schedule 18.11.2014
comment
Извините, видимо, я не ясно изложил свой вопрос. Я хочу иметь возможность искать как имя, так и фамилию в одной строке поиска. Это решение создает две отдельные панели поиска. - person mofitty; 18.11.2014
comment
Вы можете настроить $watch для этого поискового ввода, затем использовать split(' ') для получения имени и фамилии, а затем использовать результаты для заполнения запроса. - person Andy Rheingans; 19.11.2014

arrow_upward
0
arrow_downward

Фильтр также принимает функцию (https://docs.angularjs.org/api/ng/filter/filter):

function(value, index) {
  return value === query.first_name + ' ' + query.last_name;
}
person André Werlang    schedule 19.11.2014