cameron-f
cameron-f

Reputation: 431

How can bound data have a filter for each model attribute?

http://jsfiddle.net/8otnxoku/

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

Answers (1)

yvesmancera
yvesmancera

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

Related Questions