Как показать сообщение, когда фильтр ничего не возвращает в ng-repeat - AngularJS

Я хотел бы показать один div (сообщение), когда элементы не возвращаются в фильтр (ng-repeat).

Фильтр происходит на основе блока выбора (ng-model). И нет никаких результатов для некоторых опций выбора, в то время пользователь должен иметь возможность читать сообщение в одном месте. Могу ли я использовать ng-show/hide здесь? Как?

Спасибо,

Ответ 1

Вы также можете сохранить фильтрованный массив в переменной, а затем использовать эту переменную внутри выражения ng-show:

<select ng-model="shade" ng-options="shade for shade in shades"></select><br>
<ul>
    <li ng-repeat="c in filteredColors = (colors | filter:shade)">{{c.name}}</li>
</ul>
<div ng-show="!filteredColors.length">No colors available</div>

Вы можете увидеть его в действии в этом plunker.

Ответ 2

Вы можете получить размер массива, возвращаемого фильтром, используя что-то вроде

{{(data|filter:query).length}}

Вы можете использовать это выражение для выражения ng-show. Я не уверен, насколько это было бы результативно.

Ответ 3

Там есть более простое решение, использующее только стандартный синтаксис ngRepeat.

Как указано в официальной документации ngRepeat принимает псевдоним для коллекции, даже если к нему применен фильтр:

<div ng-repeat="model in collection | filter:search | orderBy: 'id' as filtered_result track by model.id">
    {{model.name}}
</div>

Примечание. Я добавил дополнительный фильтр объявления к примеру, скопированному из документации, чтобы иметь более полный пример.

В этом примере вы можете просто использовать:

<div class="alert alert-info" 
     ng-show="filtered_result.length == 0">
    No items in the collection!
</div>

Я тестировал его с помощью AngularJS 1.5.0, я не могу сказать, когда была введена эта функция.