Ng-Show if filtered search is not empty?

Question

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

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>

Answer 1

You can do

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

// content

</div> 

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

Answer 2

Please see working example http://jsbin.com/nusoc/1/edit

you can crate filterdShows , filteredAllshows in your repeater and use it in ng-show directive ie:

<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='shows.length > 0' ng-show='searchbar'