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>

score 24 · Accepted Answer · edited May 23 '17 at 12:34

24

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

edited May 23 '17 at 12:34

Community

1
1

answered Sep 16 '14 at 20:26

az7ar

5,187
2
19
23

I've recreated that for my code and update the question with it. Thanks! :-) – User183849481 Sep 16 '14 at 20:37

score 1 · Answer 2 · answered Sep 16 '14 at 20:31

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>

score 0 · Answer 3 · answered Sep 16 '14 at 20:22

0

If I correctly understand the task you should replace ng-show='shows.length > 0' by ng-show='searchbar'

answered Sep 16 '14 at 20:22

Alexey

1,257
7
13

This works when the searchbar is empty, but I would also like for them to disappear when no results can be found. – User183849481 Sep 16 '14 at 20:25

Ng-Show if filtered search is not empty?

3 Answers3

Linked