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?

Answer 1

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

Answer 2

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}}