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

Question

我想在过滤器上没有返回任何项目时显示一个div(消息)(ng-repeat).

根据选择框(ng-model)进行过滤.并且某些选项没有结果,那时用户应该能够在同一个地方阅读消息.我可以在这里使用ng-show/hide吗？怎么样？

谢谢,

Answer 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中看到它的实际效果.

Answer 2

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

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

您可以将此表达式用于ng-show表达式.我不确定它会有多高效.

Answer 3

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

如官方文档中所述,即使对其应用了过滤器,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测试了它,我不知道这个功能何时推出.