Я думал, что это будет очень распространенная вещь, но я не мог найти, как справиться с этим в AngularJS. Допустим, у меня есть список событий и я хочу вывести их с AngularJS, тогда это довольно просто:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
Но как мне справиться со случаем, когда список пуст? Я хочу, чтобы на месте сообщения находилось что-то вроде «Нет событий» или что-то подобное. Единственное, что может подойти ближе - это ng-switch
with events.length
(как я могу проверить, пустой ли объект, а не массив?), Но действительно ли это единственный вариант, который у меня есть?
Ответы:
Вы можете использовать ngShow .
Смотрите пример .
Или вы можете использовать ngHide
Смотрите пример .
Для объекта вы можете проверить Object.keys .
источник
ng-hide="hasEvents()"
.И если вы хотите использовать это с отфильтрованным списком, вот хитрый трюк:
источник
filteredItems
и устанавливает ее значение(items | filter:keyword)
- другими словами, массив, возвращаемый фильтром"face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'
но я согласен со всеми, это невероятный трюк.Возможно, вы захотите проверить директиву angular-ui,
ui-if
если вы просто хотите удалитьul
из DOM, когда список пуст:источник
ng-hide
без angular-ui, но он просто скроет узел, он не удалит его из дерева DOM. С помощьюui-if
директивы angular-ui он удалит узел DOM. Итак, вам нужно как минимум добавитьui-if
директиву из кода angular-ui в ваш собственный код.ng-if
комплекте!ng-if
создает новую область, гдеng-hide
нет. Это может вызвать неожиданное поведение.В более новых версиях angularjs правильный ответ на этот вопрос заключается в использовании
ng-if
:Это решение не будет мерцать, когда список собирается загрузить либо потому, что список должен быть определен и имеет длину 0 для отображения сообщения.
Вот плункер, чтобы показать его в использовании: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
Совет: Вы также можете показать загрузочный текст или счетчик:
источник
Это похоже на @Konrad 'ktoso' Malawski, но немного легче запомнить.
Протестировано с Angular 1.4
источник
ng-if='!filteredItems.length'
item in items | filter: ... | filter: ...
<li ng-if="!filteredItems.length">
item in (filteredItems = (items | filter: someFilter))
Вот другой подход с использованием CSS вместо JavaScript / AngularJS.
CSS:
Разметка:
Если список пуст, <li ng-repeat = "item in FilterItems"> и т. Д. Будут закомментированы и станут комментарием вместо элемента li.
источник
Вы можете использовать этот нг-переключатель:
источник
Вы можете использовать
as
ключевое слово для ссылки на коллекцию подng-repeat
элементом:источник
я обычно использую нг-шоу
где переменная вы определяете например
источник
Вы можете использовать ng-if, потому что он не отображается на html-странице, и вы не видите свой html-тег в inspect ...
источник