Angular JS ng: repeat filter based on selection option

Question

I am new to Angular. I am trying to filter the dataset shown based on the option selected using the select box.

<div ng-controller="CurrentTrandetailsController"> <div> <div class="pull-right"> <label for="show-filter" class="show-label">Show </label> <select name="show-filter" ng-model="searchText.accruedcard" id="show-filter" ng-options="trandetail.accruedcard as trandetail.accruedcard for trandetail in currentTrandetails.trandetails "> <option value="">All</option> </select> </div> <h3>Current trandetails</h3> </div> <div> <table class="table table-striped table-hover"> <tbody> <tr ng-repeat="trandetail in currentTrandetails.trandetails | filter:searchText"> <td>{{trandetail.dateAccrued}}</td> <td>{{trandetail.accruedcard}}</td> <td>{{trandetail.placeAccrued}}</td> <td>{{trandetail.discountcents}}</td> <td>{{trandetail.shortExpiryDate}}</td> </tr> </tbody> </table> </div> 

I used the example provided at http://docs.angularjs.org/api/ng.filter:filter , which uses an input field to filter. When choosing this card, it seems the filter is fine. However, when I select "All", which is set to "", it does not display all records (clear the filter). However, in the example shown, when the text field is cleared, all entries are displayed.

What am I doing wrong?

Answer 1

You need to change your selection to:

 <select name="show-filter" ng-model="searchText" ... 

instead

 <select name="show-filter" ng-model="searchText.accruedcard" ... 

Explanation: From what I saw, a hard-coded parameter is often used along with ng-options, and this contributes to the problem. The filter uses a selection model, which is currently an object instead of a string, as in the Angular example. The sample objects are fine , but in this case the properties of the object become null when All is selected, because it is not connected to the selection in the same way as the other options.

This is why the searchText filter fails because it expects valid strings (even when using an object for the corresponding template).

Using the string primitive for the selected model, All 'hack' is saved, because this leads to the fact that the selected model becomes ( '' ) instead of zero, which will correspond to all, and all the results will be shown.

Answer 2

I ran into the same problem. The way I fixed it was to use .toString() in a filter.