How to filter on multiple fields in AngularJS ng-repeat

Question

I am creating a site with a search using the query filter in AngularJS. I have found many tutorials on how to implement this search in one field, but none that explain how to search across multiple fields. So if your data has firstName: "John", lastName: "Smith" I would like to be able to enter "John Smith" in my search bar, and find the correct results, but only the exact text of "John" or "Smith" works.

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

Andy Rheingans · Accepted Answer · 2014-11-18 20:40:20Z

5

According to the angular docs it looks like you can pass in an object to the filter. So you could do something like:

scope.query = {};

Then in your html

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

And your filter expression would remain the same:

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

See the details for the 'expression' argument for more info: https://docs.angularjs.org/api/ng/filter/filter.

edited Nov 18, 2014 at 20:40

answered Nov 18, 2014 at 20:21

Andy Rheingans

513 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mofitty Over a year ago

Sorry, I guess I didn't make my question clear. I want to be able to search both first and last name in the same search bar. This solution makes two separate search bars.

Andy Rheingans Over a year ago

You could set up a $watch on that search input, then use split(' ') to get first and last name, and then use the results from that to populate the query.

André Werlang · Accepted Answer · 2014-11-19 00:06:20Z

0

Filter also accepts a function (https://docs.angularjs.org/api/ng/filter/filter):

function(value, index) {
  return value === query.first_name + ' ' + query.last_name;
}

answered Nov 19, 2014 at 0:06

André Werlang

5,9841 gold badge37 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to filter on multiple fields in AngularJS ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related