我认为这将是一个非常普遍的事情,但我找不到如何在AngularJS中处理它 . 假设我有一个事件列表并希望使用AngularJS输出它们,那么这很简单:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
但是当列表为空时我该如何处理?我希望有一个消息框,其中列表与"No events"或类似的东西 . 唯一可以接近的是 ng-switch
和 events.length
(如何在对象而不是数组时检查是否为空?),但这真的是我唯一的选择吗?
9 回答
你可以使用ngShow .
见example .
或者你可以使用ngHide
见example .
对于对象,您可以测试Object.keys .
如果你想在过滤列表中使用它,这里有一个巧妙的技巧:
如果您只想在列表为空时从DOM中删除
ul
,您可能想要查看angular-ui directiveui-if
:使用更新版本的angularjs,这个问题的正确答案是使用ng-if:
当列表即将下载时,此解决方案不会闪烁,因为必须定义列表并且长度为0才能显示消息 .
这是一个使用它的plunker:http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
提示:您还可以显示加载文本或微调器:
这类似于@Konrad'ktoso'Malawski,但稍微容易记住 .
用Angular 1.4测试
这是使用CSS而不是JavaScript / AngularJS的不同方法 .
CSS:
标记:
如果列表为空,<li ng-repeat =“filterItems中的项目”>等将被注释掉,并将成为注释而不是li元素 .
您可以使用此ng-switch:
我通常使用ng-show
例如,您定义的变量
你可以使用ng-if,因为这不是在html页面中渲染而你在检查中看不到你的html标签...