javascript - 当过滤的搜索栏不返回任何内容时，如何 ngShow a div？

Question

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

1. 我有一个 ng-repeat，它是重复的类似盒子的小部件，里面有数据/信息。

2. 我有一个搜索栏，可以过滤小部件中的数据，并且仅显示包含搜索栏中字符串的小部件。

3. 考虑到数字 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>

Related SO Question