AngularJS ng重复处理空列表事例
AngularJS ng-repeat handle empty list case
我认为这是一件非常常见的事情,但我找不到如何在AngularJS中处理它。假设我有一个事件列表,并想用AngularJS输出它们,那么这很容易:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
但是,当列表为空时,我该如何处理这种情况?我想在列表中有一个类似"无事件"或类似内容的消息框。唯一接近的是ng-switch
和events.length
(当是对象而不是数组时,我如何检查是否为空?),但这真的是我唯一的选择吗?
您可以使用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>
如果您只想在列表为空时从DOM中删除ul
,则可能需要检查angular ui指令ui-if
:
<ul ui-if="!!events.length">
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
对于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。
这里有一个plunker来显示它的使用情况: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 进行测试
这里有一种使用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 filteredItems">等将被注释掉,并将成为注释而不是li元素。
您可以使用以下ng开关:
<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>
您可以使用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显示
<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页面中呈现的,并且您在inspect中看不到您的html标记。。。
<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>
- AngularJS ng重复处理空列表事例
- "改变“;列表头,然后继续处理列表
- 如何使用Python/Selenium网络驱动程序处理Angularjs/Javascript下拉列表
- 处理html列表中的javascript对象
- 如何处理多选下拉列表 - JQuery.
- 以相同的形式处理javascript和php中下拉列表的操作
- javascript事件处理程序列表
- 我无法将变量从动态列表传递到php页面进行处理.这是我不理解的逻辑问题吗
- 如何处理下拉列表's所选内容正在更改
- 通过更改HTML元素上的动态类名来处理事件列表器
- 淘汰赛获胜;t处理多选列表的数字数组
- 选择器不处理下拉列表更改
- 如何使用事件处理程序连续循环遍历数组列表(从结束恢复到开始)
- 为什么列表视图单击处理程序在启动时执行函数
- 将 jQuery 错误处理添加到列表、网格内的 JSF 页面上的所有图像
- 如何处理下拉列表的十进制值而不舍入或修剪零
- 在角度中按列表值进行动画处理
- 有关如何对列表项的背景进行动画处理的建议
- NodeJS:如何使用异步.js来处理数据库中的项目列表
- 数组循环 - 处理下拉列表中的空值