Angular: filtering on selected option and user entered value

Question

I have a need to filter on a dataset. My form will look something like this:

<select>
    <option>Age</option>
    <option>CustomerID</option>
    <option>ProductID</option>
<select>

<input type="text" name="select-option-value">

What I want to achieve is the user selects an option, say age for example. Then enter a value for age in the input box. Only when an option and value has been entered in the input box will the filtering be performed on both of these form elements.

How would I do this?

Wht do u mean by...... "....then filter on the option selected and the value." Not very clear :-( — Jay
– Jay, Commented Sep 27, 2015 at 18:44

Michel · Accepted Answer · 2015-09-27 19:09:15Z

You need to use ng-model on the <select> list so as to store the type of the filter, and ng-model on the <input> so as to store the value of the filter. The value of the filter is stored in a search object indexed by the filter type. See below:

HTML

<select ng-model="filterType">
    <option value="age">Age</option>
    <option value="customerId">CustomerID</option>
    <option value="productId">ProductID</option>
</select>
<input type="text" name="select-option-value" ng-model="search[filterType]">

<div ng-repeat="person in persons | filter: search">{{person.name}}</div>

Controller:

app.controller('DemoCtrl', function ($scope) {
    $scope.search = {};
    $scope.persons = [...];
});

Here is a demo of how all that works. Just select a type filter, and enter a value.

Collectives™ on Stack Overflow

Angular: filtering on selected option and user entered value

1 Answer 1

HTML

Controller:

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

Controller:

2 Comments

Linked

Related