ng-repeat filter “show all” items if no filter sel

Question

I have an ng-repeat filter that uses a <select> menu to filter through a bunch of countries.

For example:

<div class="col-md-3 col-sm-6" ng-repeat="item in listings | filter: { location: locationFilter }">

How can I make it so that if nothing is selected, it automatically shows ALL the countries? And only starts filtering once a particular country is selected?

I'm sure this is probably a simple question but I am quite new to this and couldn't find how to do it.

Thanks!

Answer 1

If the filter expression returned undefined, then the filter would not apply. So, you could do something like the following:

<div ng-repeat="item in listings | filter:(!!locationFilter || undefined) && {location: locationFilter}">
   {{item}}
</div>

(!!locationFilter handles '', falsy and undefined values)

plunker

Answer 2

I would advise you to keep a simple declarative statement in your ng-repeat | filter

Then in your <select> tag, add a field for All like this :

<select ng-model="search.filter">
    <option value="{{undefined}}">All</option>
    <option ng-repeat="field in locations" value="field">field</option>
</select>

Answer 3

I have tried this and it worked

 <select ng-options="model.FeatureVersion as model.FeatureVersion for model in PostDataResponse" ng-model="featureVersion">
             <option value="">All</option>
            </select>
<table>
    <tr ng-repeat="model in PostDataResponse  | filter:{FeatureVersion: !!featureVersion?featureVersion: undefined  }">
        <td>{{model.ClientId}}</td>
    </tr>
</table>

Answer 4

<div class="col-md-3 col-sm-6" ng-repeat="item in listings | filter: filtername ? filtername:''">

using this type of filter will first check the filtername is null or some value then it will take further actions. I Think this will be the easiest way.

Answer 5

Here is the fiddle how i achieve this http://jsfiddle.net/L5wcgdhy/:-

HTML:-

<div ng-controller="MyCtrl">
 <select ng-model="filter.categoryId">
        <option value="!!"></option>
        <option ng-repeat="category in categories" value="{{category.id}}">{{category.id}}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="record in records | filter:filter">
                <td>{{record.title}}</td>
                <td>{{record.categoryId}}</td>
            </tr>
        </tbody>
    </table>
</div>

Ctrl:-

function MyCtrl($scope) {
    $scope.categories = [
        {id: 1},
        {id: 2},
        {id: 3}
    ];

    $scope.filter = {categoryId: "!!"};

    $scope.records = [
        {title: "I'm in category #1!", categoryId: 1},
        {title: "Category 1 is for suckas. #2 ya'll!", categoryId: 2},
        {title: "Three is best", categoryId: 3}
    ];
}