过滤后的搜索栏不返回任何内容时如何显示 div？答案

【问题标题】：How to ngShow a div when filtered search bar returns nothing?过滤后的搜索栏不返回任何内容时如何显示 div？
【发布时间】：2015-05-07 19:12:57
【问题描述】：

首先我将提供背景信息，然后显示一些代码 sn-ps。

我有一个 ng-repeat，它重复盒子状的小部件，里面有数据/信息。
我有一个搜索栏，用于过滤小部件中的数据，并且仅在搜索栏中显示包含该字符串的小部件。
考虑到数字 2，当输入的字符串不在任何小部件中时，它会使页面空白且没有小部件。（它使没有该字符串的小部件消失）

我想要的是：当没有返回结果而不是空白页时显示一个 div。

为了举例，我有：

<input type = "text" data-ng-model = "searchWidgets" />

<div id="main-content-body" data-ng-repeat="widget in widgets | filter:searchWidgets">

    <div id="falsy-search" ng-show="!searchWidgets.length">
        <h1 id="inset-message" class="text-center">No Results Found</h1>
    </div>

    <section>
        (this is where all the widgets get displayed)
    </section>

</div>

提前感谢您的时间和投入！

【问题讨论】：

标签： javascript angularjs web

【解决方案1】：

你可以有几种选择，最简单的一种是将过滤的Widgets保存为自己的对象，然后使用ng-show：

<div id="main-content-body" data-ng-repeat="widget in (filteredWidgets = (widgets | filter:searchWidgets))">

    <div id="falsy-search" ng-show="!searchWidgets.length || filteredWidgets.length == 0">
        <h1 id="inset-message" class="text-center">No Results Found</h1>
    </div>

    <section>
        (this is where all the widgets get displayed)
    </section>

</div>