Ng-Show如果过滤搜索不为空？

Question

我目前正在为我的电视节目网络应用创建实时搜索.一切都很好.我想要的是,如果过滤搜索为空,则不显示<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 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>

====================在一些答案之后,这就是我从他们那里创造出来的.现在很棒!

<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>

Answer 1

你可以做

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

// content

</div> 

但这有性能问题(多次使用过滤器).也看看这个如何显示过滤的ng-repeat数据的长度