Reputation: 431
I've reduced my problem down to this analogy.
I have a model of presidents with their first name, last name and party affiliation:
$scope.presidents = [{firstName: 'George',
lastName: 'Washington',
party: 'Independent'},
{firstName: 'John',
lastName: 'Adams',
party: 'Federalist'},
{firstName: 'Thomas',
lastName: 'Jefferson',
party: 'Deomcratic-Republican'},
{firstName: 'James',
lastName: 'Madison',
party: 'Deomcratic-Republican'},
{firstName: 'James',
lastName: 'Monroe',
party: 'Democratic-Republican'},
]
I also have html input boxes I'd like to bind to the model attributes:
<input ng-model="query" type="text" name="FirstName" placeholder="First Name">
<input type="text" name="LastName" placeholder="Last Name">
<input type="text" name="Party" placeholder="Party">
My question is, how can I link an input box to filter a specific model attribute instead of all attributes for the model like it is doing now?
As a result, when I type 'George' into the FirstName input box then George Washinton's record would be returned, but if I typed 'George' into the LastName input box then no records would be returned. Or if I typed 'Washington' into the FirstName input box then no records would be shown.
Upvotes: 2
Views: 38
Reputation: 2925
Simply convert "query" into an object and each filter sets a different property.
<label for="FirstName">First Name:</label>
<input ng-model="query.firstName" type="text" name="FirstName" placeholder="First Name"><br>
<label for="LastName">Last Name:</label>
<input ng-model="query.lastName" type="text" name="LastName" placeholder="Last Name"><br>
<label for="Party">Party:</label>
<input ng-model="query.party" type="text" name="Party" placeholder="Party"><br>
Here's your updated fiddle: http://jsfiddle.net/8otnxoku/1/
For more examples on filtering you can always check the docs
Upvotes: 1