Да, операционная система освобождает всю память, когда процесс завершается.
Вы можете использовать ngShow .
<li ng-show="!events.length">No events</li>
См. пример .
Или вы можете использовать ngHide
<li ng-hide="events.length">No events</li>
См. пример .
Для объекта вы можете проверить Object.keys .
И если вы хотите использовать это с отфильтрованным списком, вот хитрый трюк:
<ul>
<li ng-repeat="item in filteredItems = (items | filter:keyword)">
...
</li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>
В более новых версиях angularjs правильный ответ на этот вопрос заключается в использовании ng-if
:
<ul>
<li ng-if="list.length === 0">( No items in this list yet! )</li>
<li ng-repeat="item in list">{{ item }}</li>
</ul>
Это решение не будет мерцать, когда список собирается загрузить либо потому что список должен быть определен и иметь длину 0 для отображения сообщения.
Вот плункер, чтобы показать его в использовании: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
Подсказка: Вы также можете показать загрузочный текст или вертушка:
<li ng-if="!list">( Loading... )</li>
<ul>
<li ng-repeat="item in items | filter:keyword as filteredItems">
...
</li>
<li ng-if="filteredItems.length===0">
No items found
</li>
</ul>
Это похоже на @Konrad 'ktoso' Malawski, но немного легче запомнить.
Протестировано с Angular 1.4
Вы можете использовать этот нг-переключатель:
<div ng-app ng-controller="friendsCtrl">
<label>Search: </label><input ng-model="searchText" type="text">
<div ng-init="filtered = (friends | filter:searchText)">
<h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
<div ng-switch="(friends | filter:searchText).length">
<span class="ng-empty" ng-switch-when="0">No friends</span>
<table ng-switch-default>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</tbody>
</table>
</div>
Вот другой подход с использованием CSS вместо JavaScript / AngularJS.
CSS:
.emptymsg {
display: list-item;
}
li + .emptymsg {
display: none;
}
Разметка:
<ul>
<li ng-repeat="item in filteredItems"> ... </li>
<li class="emptymsg">No items found</li>
</ul>
Если список пуст, < li ng-repeat = "item in FilterItems"> и т. Д. Будут комментироваться и станет комментарием вместо элемента li.
Вы можете использовать ключевое слово as
для ссылки на коллекцию в элементе ng-repeat
:
<table>
<tr ng-repeat="task in tasks | filter:category | filter:query as res">
<td>{{task.id}}</td>
<td>{{task.description}}</td>
</tr>
<tr ng-if="res.length === 0">
<td colspan="2">no results</td>
</tr>
</table>
Я обычно использую ng-show
<li ng-show="variable.length"></li>
, где переменную вы определяете, например,
<div class="list-group-item" ng-repeat="product in store.products">
<li ng-show="product.length">show something</li>
</div>
вы можете использовать ng-if, потому что он не отображается на html-странице, и вы не видите свой html-тег в inspect ...
<ul ng-repeat="item in items" ng-if="items.length > 0">
<li>{{item}}<li>
</ul>
<div class="alert alert-info">there is no items!</div>
Возможно, вы захотите проверить директиву angular-ui ui-if
, если вы просто хотите удалить ul
из DOM, когда список пуст:
<ul ui-if="!!events.length">
<li ng-repeat="event in events">{{event.title}}</li>
</ul>