Question

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

我有一个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>

提前感谢您的时间和意见！

Answer 1

你可以有几个选项，其中一个最简单的方法是将filteredWidgets保存为自己的对象，只需使用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>

如何过滤搜索栏什么都不返回时显示div？

1 个答案: