Says we have a search input which filters data by two properties: name and id
<input ng-model="query.name">
<input ng-model="query.id">
<div ng-repeat="item in items | filter:query"></div>
How can I do this in one simple input ng-model
Thanks in advance
Really simple, you are almost there:
<input ng-model="query">
<div ng-repeat="item in items | filter:query">{{item}}</div>
This way you have only one ng-model to filter.
--
Edit:
If you have more properties in your object that don't want to be filtered, you can use a function or a custom filter, from the documentation:
{{ filter_expression | filter : expression : comparator}}
Expressioncan be:string,Objectorfunction()
I've updated the fiddle to demonstrate how you can filter using both a function and a custom filter: fiddle.
Haven't tried it, but it looks like from the docs at https://docs.angularjs.org/api/ng/filter/filter that you can do something like this:
<input ng-model="query.$">
See the last example on the page and the part that talks about the "Object" version of the "expression" argument to the filter.
You can easily solve this problem with angular-filter.
https://github.com/a8m/angular-filter
CONTROLLER
$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 -->
As simple as that.
Good Luck.
