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>

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

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

            </li>

        </ul>

        <hr>

    </div>

Answer 3

如果我正确理解了该任务，您应该ng-show='shows.length > 0'

替换ng-show='searchbar'

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

3 个答案: