AngularJS重复把手空列表情况(AngularJS ng-repeat handle empt

我认为这将是一个很平常的事情，但我找不到如何处理它在AngularJS。 比方说，我有一个事件列表，并希望与AngularJS输出它们，那是很容易：

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

但我怎么处理这种情况时，该列表是空的？ 我想有一个消息框，在地方名单是像“不活动”或类似。 这将接近的唯一的事情就是ng-switch与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:

您可能要检查出角的UI指令 ui-if你只是想删除ul从DOM当列表为空：

<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的长度为消息显示这些溶液不会闪烁。

这里是一个plunker显示它在使用中： 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”斯基但是稍微容易记住。

与角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重复=“在filteredItems项目”>等将得到注释掉，将成为一个评论，而不是一个li元素。

Answer 7:

您可以使用此NG-开关：

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

Answer 8:

您可以使用as关键字来指代一个下集ng-repeat元素：

<table>
    <tr ng-repeat="task in tasks | filter:category | filter:query as res">
        <td>{{task.id}}</td>
        <td>{{task.description}}</td>
    </tr>
    <tr ng-if="res.length === 0">
        <td colspan="2">no results</td>
    </tr>
</table>

Answer 9:

我通常使用NG-秀

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

其中变量定义，例如

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

Answer 10:

您可以使用NG-如果因为这不是在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>

文章来源: AngularJS ng-repeat handle empty list case