AngularJS ng-repeat处理空列表大小写的情况

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

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

但是,如果列表为空,我怎么处理呢? 我希望有一个消息框,其中的列表是“没有事件”或类似的东西。 唯一会接近的是带有events.lengthng-switch (当一个对象而不是一个数组时,我该如何检查是否为空),但这真的是我唯一的select吗?

你可以使用ngShow 。

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

看例子 。

或者你可以使用ngHide

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

看例子 。

对于你可以testingObject.keys的对象。

如果你想用这个过滤列表这是一个巧妙的把戏:

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

您可能需要查看angular-ui指令 ui-if如果您只是想在列表为空时从DOM中删除ul

 <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> 

当列表即将下载时,此解决scheme不会闪烁,因为必须定义列表,并且要显示消息的长度为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类似,但稍微容易记住。

testing与angular1.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 =“items in filteredItems”>等将被注释掉,并将成为注释而不是li元素。

你可以使用这个ng-switch:

 <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> 

我通常使用ng-show

 <li ng-show="variable.length"></li> 

例如你定义的variables

 <div class="list-group-item" ng-repeat="product in store.products"> <li ng-show="product.length">show something</li> </div> 

你可以使用ng-if,因为这不是在html页面中呈现的,而且你在检查中看不到你的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>