AngularJS ng-repeat handle empty list case

javascript angularjs angularjs-ng-repeat angularjs-ng-show

2022-08-29 23:35:31

我以为这将是一件非常普遍的事情，但我找不到如何在AngularJS中处理它。假设我有一个事件列表，并希望使用AngularJS输出它们，那么这很容易：

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

但是，当列表为空时，我该如何处理这种情况？我想在列表的位置放置一个消息框，其中包含“无事件”或类似内容。唯一接近的是 with （我如何检查对象而不是数组时是否为空？），但这真的是我唯一的选择吗？ng-switchevents.length

答案 1

您可以使用ngShow。

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

请参阅示例。

或者你可以使用ngHide

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

请参阅示例。

对于对象，您可以测试 Object.keys。

答案 2

如果你想在过滤列表中使用它，这里有一个巧妙的技巧：

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