0

I am new to AngularJS and writing an AngularJS application with four drop down (select) acting as the search criteria to filter the search result. Each drop down is populated by a field from the search result. Though, some of the dropdown fields are not displayed in the search result.

The expected logic is as follows: 1.On page load, you display the 4 dropdown and underneath the unfiltered results say, 10 rows 2.On change of dropdown A, the associated filter is applied to the JSON result and result is refreshed and automatically displayed 3.The last selected dropdown option is retained each time 4.On change of dropdown B, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further 5.On change of dropdown D, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further 6.On change of dropdown C, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further

So, the dropdown can be selected in any order and there is a cummulative filtering Also, if no result is returned by filter combination, a message is displayed.

I have a solution for one drop down, but cannot implement multiple drop down filter on same json data. My solution was based on the following filter data using dropdown?, which as a plunker.

Any help will be very much appreciated.

Improve this question
2
  • Your filters are comparative or absolute ?? To elaborate, are you going to apply filters like "this equal to this" or "this less than / greater than this" ?? Commented Aug 6, 2014 at 10:01
  • Thanks for your prompt response. Its Absolute like "XY" in dropdown json is equal to "XY" field in the search result. The dropdown fields are retrieved from the main search json i.e. on page load. And all the dropdown have a "show all" option. If all the dropdown have "show all", the search results is reset to original. Commented Aug 6, 2014 at 10:06

1 Answer 1

Reset to default
2

You can pass an Object as the parameter to your filter expression, as described in the API Reference here http://docs.angularjs.org/api/ng.filter%3afilter. This object can selectively apply the properties you're interested in, like so:

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

Here's a Plunker : http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview

The plunker works for input tags, hence it will also work for select tags with few modifications.

Disclaimer : Plunker Not Created By Me

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, I will have a look and get back
Selecting a dropdown options results in no search result. I cannot spoke issues, can anyone spot the obvious please? I have created a plunker: plnkr.co/edit/9fMV0hPfeYNKKTzJQhqg?p=preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.