Ng-显示过滤的搜索是否为空? [英] Ng-Show if filtered search is not empty?

问题描述

我目前正在为TV Shows网络应用创建实时搜索.一切正常.我想要的是，如果过滤后的搜索为空，则不显示<div>我当前的实现仍无法正常工作...

I'm currently in the process of creating a live search for my TV Shows web app. Everything is working fine. What I would like though is, if the filtered search is empty, to not display the <div> My current implementation isn't working though...

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

Also I would like for it to display something like Please typ to search if a user doesn't enter anything...

<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 alt="{{ show.name }}" 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 alt="{{ allshow.name }}" src="img/artwork/{{ allshow.image_name }}.png" style="width:50px;height:50px;">

            </li>

        </ul>

        <hr>

    </div>

</div>

==================== 经过一些答案后，这就是我从中创建的.现在效果很好！

==================== After some of the answers, this is what I created from them. Works great now!

<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 alt="{{ show.name }}" 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 alt="{{ allshow.name }}" src="img/artwork/{{ allshow.image_name }}.png" style="width:50px;height:50px;">

                </li>

            </ul>

            <hr>

        </div>

    </div>

</div>

推荐答案

您可以

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

// content

</div> 

但这存在性能问题(多次使用过滤器).也查看一下如何显示经过过滤的ng-repeat数据的长度

But this has a performance issue ( using filter multiple times). Have a look at this too How to display length of filtered ng-repeat data

这篇关于Ng-显示过滤的搜索是否为空?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！