CODEWITHSUNDEEP
angularjs
tommybananas
tommybananas

Reputation: 5736

How to reset angular filter property

I have a list of filtered data:

<tr ng-repeat="course in courses | filter:search:true">
    <td>
        <div>{{course.course_name}}</div>
    </td>
</tr>

and a SELECT input to help filter it:

<select ng-model="search.location_id">
    <option value="">Location</option>
    <option ng-repeat="course in courses" value="{{course.location_id}}>{{course.location}}</option>
</select>

Everything works great when switching between course locations to filter the data. My problem is that when I want to show ALL of the data and return to the default SELECT option (value=""), the data is gone and interprets it as nothing matching instead of unsetting the filter.

I realize that if I use search:false, it will work as intended, but I need this parameter as true and I also need a way to reset the filter.

Upvotes: 1

Views: 3499

Answers (1)

muenchdo
muenchdo

Reputation: 2181

You should use ng-options inside your select statement. You can leave the single <option> with value="" in there though. If you select the default option, the value of search.location_id will be null, which should be exactly what you need.

<select ng-model="search.location_id" ng-options="course.location for course in courses">
    <option value="">Location</option>
</select>

Demo on Plunker.

Upvotes: 2

Related Questions