关于javascript：AngularJS ng-repeat处理空列表案例


AngularJS ng-repeat handle empty list case

我原以为这是一件很平常的事情，但在安古拉吉斯我找不到如何处理它。假设我有一个事件列表，想要用AngularJS输出它们，那么这很容易：

1
2
3
4
5
6
7
<ul>

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


</ul>

但是，当列表为空时，如何处理该案例？我想在列表中放置一个带有"无事件"或类似内容的消息框。唯一能接近的是带events.length的ng-switch(当一个对象而不是一个数组时，如何检查是否为空？)但这真的是我唯一的选择吗？

相关讨论

你可以使用ngshow。

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

参见示例。

或者你可以用nghide

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

参见示例。

对于对象，可以测试object.keys。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
<ul>

    <li ng-repeat="item in filteredItems  = (items | filter:keyword)">
        ...
   
</li>


</ul>

No items found
相关讨论

对于新版AngularJS，正确答案是使用ng-if：

1
2
3
4
5
6
7
8
9
10
<ul>

  <li ng-if="list.length === 0">( No items in this list yet! )
</li>

  <li ng-repeat="item in list">{{ item }}
</li>


</ul>

当列表即将下载时，此解决方案将不会闪烁，因为必须定义列表，并且消息显示的长度为0。

下面是一个展示它在使用中的工具：http://plnkr.co/edit/in7ha1wtlpuvgamiobles？P=预览

提示：您还可以显示加载文本或微调器：

1
2
  <li ng-if="!list">( Loading... )
</li>

如果您只想在列表为空时从dom中删除ul，则可能需要检查angular ui指令ui-if：

1
2
3
4
5
6
<ul ui-if="!!events.length">
    <li ng-repeat="event in events">{{event.title}}
</li>


</ul>
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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，但稍微容易记住。

用角度1.4测试

相关讨论

这里有一种使用CSS而不是JavaScript/AngularJS的不同方法。

CSS：

1
2
3
4
5
6
7
.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

Markup：

1
2
3
4
5
6
7
8
9
10
<ul>

    <li ng-repeat="item in filteredItems"> ...
</li>

    <li class="emptymsg">No items found
</li>


</ul>

如果列表为空，

  • 等将被注释掉，并将成为注释而不是li元素。

    相关讨论

    可以使用as关键字引用ng-repeat元素下的集合：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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>

    您可以使用此NG开关：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      <label>Search: </label><input ng-model="searchText" type="text">
     
      'Found '{{(friends | filter:searchText).length}} friends
     
        <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>

    您可以使用ng-if，因为它不在HTML页面中呈现，并且在inspect中看不到您的HTML标记…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul ng-repeat="item in items" ng-if="items.length > 0">
       
    <li>
    {{item}}
    <li>


    </ul>

    there is no items!

    我通常用NG表演

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

    例如，定义的变量

    1
    2
       <li ng-show="product.length">show something
    </li>