clearing filter in angularJS using select

angularjs angularjs-filter
trainoasis picture trainoasis · Feb 17, 2014 · Viewed 10.8k times · Source

I use the ngOptions directive in the HTML given below: 

<select ng-model="selectedGroupToShow.Id" ng-options="g.Id as g.Name for g in myGroups">
    <option value>-- All --</option>
</select>

The filter I am using in ng-repeat to show my data goes like this:

filter:{GroupId:selectedGroupToShow.Id}"

Even if I use 

filter:selectedGroupToShow

the issue stays the same.Resetting the filter..

This works perfectly, but when I want to clear the filter (select default option - 'All') it will only show data that doesn't have GroupId parameter set at all.

How can I show ALL the data (clear the filter) when choosing default option element within select?

Answer

Sai picture Sai · Feb 17, 2014

I think I understand your problem and the issue you are facing is when dropdown selected to --ALL-- its value is null and not undefined. So to reset it you have to set it for undefined.

<div ng-repeat="item in items| filter:{itemId:selectedGroupToShow.Id||undefined}">
         {{item.itemId}}
</div>

Please refer the below fiddle I have created for your problem.

fiddle

Related questions

ng-repeat :filter by single field

I have an array of products that I'm repeating over using ng-repeat and am using <div ng-repeat="product in products | filter:by_colour"> to filter these products by colour. The filter is working but if the product name / …

Read More
Limit the length of a string with AngularJS

I have the following: <div>{{modal.title}}</div> Is there a way that I could limit the length of the string to say 20 characters? And an even better question would be is there a way that …

Read More
Descending order by date filter in AngularJs

<div class="recent" ng-repeat="reader in (filteredItems = (book.reader | orderBy: 'created_at' | limitTo: 1))"> </div> So the book comes from rest api and it has many readers attached. I want to get the 'recent' reader. The created_…

Read More