Как показать сообщение, когда фильтр ничего не возвращает в 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, я не могу сказать, когда была введена эта функция.