AngularJS ng-repeat处理空列表大小写的情况
我认为这将是一个非常普遍的事情，但我找不到在AngularJS中如何处理它。 假设我有一个事件列表，并希望用AngularJS输出它们，那么这很简单：
<ul> <li ng-repeat="event in events">{{event.title}}</li> </ul> 但是，如果列表为空，我怎么处理呢？ 我希望有一个消息框，其中的列表是“没有事件”或类似的东西。 唯一会接近的是带有events.length的ng-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>
