当过滤器在 ng-repeat 中没有返回任何内容时如何显示消息 - AngularJS答案

【问题标题】：How to show a message when filter returns nothing in ng-repeat - AngularJS当过滤器在 ng-repeat 中没有返回任何内容时如何显示消息 - AngularJS
【发布时间】：2014-02-26 18:35:25
【问题描述】：

当过滤器（ng-repeat）上没有返回项目时，我想显示一个 div（消息）。

过滤器基于选择框（ng-model）进行。并且某些选择选项没有结果，此时用户应该能够在同一位置阅读消息。我可以在这里使用 ng-show/hide 吗？怎么样？

谢谢，

【问题讨论】：

How to change class depending on filter result in AngularJS? 的可能重复项

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

您还可以将过滤后的数组保存在一个变量中，然后在 ng-show 表达式中使用该变量：

<select ng-model="shade" ng-options="shade for shade in shades"></select><br>
<ul>
    <li ng-repeat="c in filteredColors = (colors | filter:shade)">{{c.name}}</li>
</ul>
<div ng-show="!filteredColors.length">No colors available</div>

您可以在plunker 中看到它的实际效果。

【讨论】：

此消息没有可用颜色，正在加载数据时显示，如何防止在加载时不显示该消息？
@SudarshanKalebere 你可以有一个标志来知道数据是否正在加载。

【解决方案2】：

您可以使用类似的方法获取过滤器返回的数组大小

{{(data|filter:query).length}}

您可以将此表达式用于ng-show 表达式。我不确定它的性能如何。

【讨论】：

这种方式比自定义过滤器更好，更短并且与 ngShow/hide 集成
我认为性能不太好。您确实得到了预期的结果，但不必要地再次运行过滤器来计算其长度。
性能命中。我同意纳特瓦伦。我更喜欢 muenchdo 建议的解决方案

【解决方案3】：

有一个更简单的解决方案，只使用 ngRepeat 的标准语法。

如official documentation 中所述，即使应用了过滤器，ngRepeat 也接受集合的别名：

<div ng-repeat="model in collection | filter:search | orderBy: 'id' as filtered_result track by model.id">
    {{model.name}}
</div>

注意：我在从文档复制的示例中添加了广告附加过滤器，以获得更完整的示例。

在此示例中，您可以简单地使用：

<div class="alert alert-info" 
     ng-show="filtered_result.length == 0">
    No items in the collection!
</div>

我用 AngularJS 1.5.0 测试过，我不知道这个功能是什么时候引入的。

【讨论】：