Ng-显示过滤后的搜索是不是为空？

Posted 2023-02-22

【中文标题】Ng-显示过滤后的搜索是不是为空？

【英文标题】：Ng-Show if filtered search is not empty?Ng-显示过滤后的搜索是否为空？

【发布时间】：2014-11-10 17:31:03

【问题描述】：

我目前正在为我的电视节目网络应用创建实时搜索。一切正常。我想要的是，如果过滤后的搜索为空，则不显示 <div> 我当前的实现虽然不起作用...

如果用户没有输入任何内容，我也希望它显示类似Please typ to search 的内容...

<div ng-controller="SearchController">

    <div ng-show='shows.length > 0'>

        <h3>Shows you've seen:</h3>

        <hr>

        <ul>

            <li ng-repeat="show in shows | filter: searchbar">

                 show.name 
                <img  src="img/artwork/ show.image_name .png" style="width:50px;height:50px;">

            </li>

        </ul>

        <hr>

    </div>

    <div ng-show='allshows.length > 0'>

        <h3>All TV Shows:</h3>

        <hr>

        <ul>

            <li ng-repeat="allshow in allshows | filter: searchbar">

                 allshow.name 
                <img  src="img/artwork/ allshow.image_name .png" style="width:50px;height:50px;">

            </li>

        </ul>

        <hr>

    </div>

</div>

===================== 在一些答案之后，这就是我从它们中创建的。现在效果很好！

<div ng-controller="SearchController">

    <div ng-hide='searchbar'>

        <h3>Please search something</h3>

    </div>

    <div ng-show='searchbar'>

        <div ng-show="(filtered = (shows | filter:searchbar)).length > 0"> 

            <h3>Shows you've seen:</h3>

            <hr>

            <ul>

                <li ng-repeat="show in filtered">

                     show.name 
                    <img  src="img/artwork/ show.image_name .png" style="width:50px;height:50px;">

                </li>

            </ul>

            <hr>

        </div>

         <div ng-show="(allfiltered = (allshows | filter:searchbar)).length > 0">

            <h3>All TV Shows:</h3>

            <hr>

            <ul>

                <li ng-repeat="allshow in allfiltered">

                     allshow.name 
                    <img  src="img/artwork/ allshow.image_name .png" style="width:50px;height:50px;">

                </li>

            </ul>

            <hr>

        </div>

    </div>

</div>

【参考方案1】：

你可以的

<div ng-show="(shows|filter:searchbar).length > 0"> 

// content

</div> 

但这有一个性能问题（多次使用过滤器）。也看看这个How to display length of filtered ng-repeat data

【讨论】：

我已经为我的代码重新创建了它并用它更新了问题。谢谢！ :-)

【参考方案2】：

请查看工作示例http://jsbin.com/nusoc/1/edit

您可以在中继器中创建 filterdShows、filteredAllshows 并在 ng-show 指令中使用它 即：

<div ng-show='filterdShows.length > 0'>

        <h3>Shows you've seen:</h3>

        <hr>

        <ul>

            <li ng-repeat="show in filterdShows = (shows | filter: searchbar)">

                 show.name 
                <img  src="img/artwork/ show.image_name .png" style="width:50px;height:50px;">

            </li>

        </ul>

        <hr>

    </div>

【参考方案3】：

如果我正确理解任务，您应该将ng-show='shows.length > 0' 替换为ng-show='searchbar'

【讨论】：

这在搜索栏为空时有效，但我也希望它们在找不到结果时消失。