AngularJS ng-repeat处理空列表案例

Question

我认为这将是一个非常普遍的事情,但我找不到如何在AngularJS中处理它.假设我有一个事件列表并希望使用AngularJS输出它们,那么这很简单:

<ul>
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

但是当列表为空时我该如何处理？我希望有一个消息框,其中列表中包含"无事件"或类似内容.唯一可以接近的是ng-switchwith events.length(如果对象而不是数组,我如何检查是否为空？),但这真的是我唯一的选择吗？

Answer 1

你可以使用ngShow.

<li ng-show="!events.length">No events</li>

见例子.

或者你可以使用ngHide

<li ng-hide="events.length">No events</li>

见例子.

对于对象,您可以测试Object.keys.

Answer 2

如果你想在过滤列表中使用它,这是一个巧妙的技巧:

<ul>
    <li ng-repeat="item in filteredItems  = (items | filter:keyword)">
        ...
    </li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>

Answer 3

如果您只想在列表为空时从DOM中删除,则可能需要检查angular-ui指令 :ui-iful

<ul ui-if="!!events.length">
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Answer 4

使用更新版本的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>

Answer 5

<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进行测试

Answer 6

这是使用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 ="filterItems中的项目">等将被注释掉,并将成为注释而不是li元素.