AngularJS - 根据 ng-repeat 中的项目数显示/隐藏答案

【问题标题】：AngularJS - Show/hide based on number of items in an ng-repeatAngularJS - 根据 ng-repeat 中的项目数显示/隐藏
【发布时间】：2014-10-15 02:09:01
【问题描述】：

我有一个带有 2 个过滤器的 ng-repeat：

<div class="container">
    <div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
        {{ addresses.name }}
        {{ addresses.number }}
        {{ addresses.email }}
        {{ addresses.contact}}
    </div>
</div>

如何在 class="container" 中添加 ng-show 或 ng-hide 以仅在 ng-repeat 中重复的项目长度大于零时显示此元素？

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-show angular-ng-if ng-hide

【解决方案1】：

尝试编写一个单独的函数，该函数将在您的控制器中发回真/假（这将确定 ng-show）。

类似以下，

<div class="container" ng-show="functionToDeterminetheState()">
   <div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}

【讨论】：

该函数必须在控制器中运行过滤器，那么这有什么帮助？破坏了在标记中使用filter 的目的
这个词行得通，小心点。 Angular 会不断评估这个函数，如果这个函数很复杂，它可能会影响性能。

【解决方案2】：

您需要将过滤结果分配给一个新变量以考虑过滤列表的长度。

然后您可以使用新变量来显示/隐藏该部分。

Working Fiddle

<div class="container" ng-show="filtered.length > 0">
    <div ng-repeat-start="addresses 
         in filtered = (Address.Entries 
                          | filter:{IsRegistered: true} 
                          | filterDate:'InfoDetails')">
          {{ addresses.name }}
          {{ addresses.number }}
          {{ addresses.email }}
          {{ addresses.contact}}
     </div>
</div>

【讨论】：

如果我们正在迭代键值对并且元素为空时应该隐藏元素可以做什么