Фильтр ng-repeat "показывать все", если фильтр не выбран

У меня есть фильтр ng-repeat, который использует меню <select> для фильтрации через кучу стран.

Например:

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

Как я могу сделать так, чтобы, если ничего не выбрано, оно автоматически отображает ВСЕ страны? И только начинается фильтрация после выбора конкретной страны?

Я уверен, что это, наверное, простой вопрос, но я совершенно новичок в этом и не мог найти, как это сделать.

Спасибо!

Ответы

Ответ 1

Если выражение фильтра возвратило undefined, тогда фильтр не применим. Итак, вы можете сделать что-то вроде следующего:

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

(!!locationFilter обрабатывает значения '', фальши и undefined)

plunker

Ответ 2

Я бы посоветовал вам оставить простую декларативную инструкцию в ng-repeat | filter

Затем в тэге <select> добавьте поле для Все, как это:

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

Ответ 3

Вот скрипка, как я достигаю этого 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}
    ];
}

Ответ 4

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>