5

I have the following html:

  <div>
    <div>
      <input type="text" placeholder="Search" ng-model="userSearch.firstname">
    </div>
  </div>

 <div>
   <div ng-repeat="user in users | filter:userSearch ">
     <div>
       {{user.firstname}} {{user.lastname}}
     </div>
   </div>
 </div>

So I have an input field where the users can type and search in my list of all users. Is there a way I can apply a filter inline in the ng-repeat based on what the user types in the search input?

Current solution only filters on firstname

I would like to filter on both first and last name

Tried:

  <div>
    <div>
      <input type="text" placeholder="Search" ng-model="userSearch">
    </div>
  </div>

 <div>
   <div ng-repeat="user in users | filter:{firstname: userSearch, lastname: userSearch} ">
     <div>
       {{user.firstname}} {{user.lastname}}
     </div>
   </div>
 </div>

But I think that is an AND not an or.

lostintranslation
  • 23,756
  • 50
  • 159
  • 262
  • Did you look at the [filter documentation](https://docs.angularjs.org/guide/filter)? – PSL Jan 22 '15 at 02:03
  • possible duplicate of [Angular.js ng-repeat :filter by single field](http://stackoverflow.com/questions/14733136/angular-js-ng-repeat-filter-by-single-field) – PSL Jan 22 '15 at 02:04
  • I want to filter on first and last name, sorry should have been more clear. – lostintranslation Jan 22 '15 at 02:07
  • Yes @PSL I did look at docs. Angular docs leave a lot to be desired. Regardless I am really confused on how to apply this filter. – lostintranslation Jan 22 '15 at 02:13
  • 1
    Ok got it but then i marked wrong dupilcate :). Here one of them http://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs. Exact scenario as [yours here](http://stackoverflow.com/questions/20977703/filter-multiple-fields-using-single-input-in-angularjs) – PSL Jan 22 '15 at 02:55
  • @lostintranslation: How can we search for firstname or last name? – saylee Apr 29 '16 at 09:53

1 Answers1

13

Change ng-model from userSearch.firstname to just userSearch.

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

http://jsbin.com/keyuno/1/edit?html,js,output

Alternatively you could change filter:userSearch to filter:userSearch.firstname. You just need to be sure the filter matches the model.

Aweary
  • 2,302
  • 17
  • 26