Clean filter in angularJS using select

Question

I use the ngOptions directive in the HTML below:

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

The filter that I use in ng-repeat to show my data is as follows:

 filter:{GroupId:selectedGroupToShow.Id}" 

Even if I use

 filter:selectedGroupToShow 

the problem remains the same. Filter check.

This works fine, but when I want to clear the filter (select the default option “All”), it will only display data that does not have the GroupId parameter set.

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

Answer 1

I think I understand your problem, and the problem you are facing is when the dropdown is selected on -ALL-- its value is null, not undefined. Therefore, to reset you need to set it to undefined.

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

Please refer to the script below that I created for your problem.

fiddle

Answer 2

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

Hope this can 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}}