clearing filter in angularJS using select

Question

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?

Sai · Accepted Answer · 2014-02-17 16:01:54Z

24

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

edited Feb 17, 2014 at 16:01

answered Feb 17, 2014 at 15:56

Sai

2,06819 silver badges26 bronze badges

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

5 Comments

trainoasis Over a year ago

You understood correctly:) Unfortunately If I use || undefined as you've shown above I get an error. If I try to put bracers () around it stays null when All is selected. I use the second filter in my question -> ng-repeat="item in items | filter:searchItemsText | filter:selectedGroupToShow || undefined". I probably use wrong structure for || ?

trainoasis Over a year ago

I just used your syntax with parameter:value and it worked, I'll just leave it so. Thank you!

trainoasis Over a year ago

still if you know how to accomplish the same thing with the filter I wrote in the first comment above I'd be glad to know how

Sai Over a year ago

I guess item is a json object you are using, if so then I'm afraid to say how will your filter:searchItemsText will work since on what basis should it filter the value. If you can create a fiddle for your problem with the exact object structure then we might be able to help you.

trainoasis Over a year ago

searchItemsText is not the issue, you can leave that one out (it works). I only had problems converting your answer to work with the second filter above

Alejandro Teixeira Muñoz · Accepted Answer · 2015-06-06 11:51:08Z

1

I did it this way, just with an empty String value.

Hope it could help anyone.

JADE code:

select.form-control(ng-model="productType", ng-init="productType='free'")
        option(value="free") FREE
        option(value="interest") INTEREST
        option(value="hybrid") HYBRID
        option(value="") ALL

.col-sm-6.col-md-4.col-lg-3(ng-repeat="product in productList | filter:{ type :productType }") {{product.name}}

answered Jun 6, 2015 at 11:51

Alejandro Teixeira Muñoz

2,7881 gold badge24 silver badges31 bronze badges

Collectives™ on Stack Overflow

clearing filter in angularJS using select

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related