Ng-Show, wenn die gefilterte Suche, nicht leer ist?

Ich bin derzeit in den Prozess der Erstellung eines live-Suche für meine TV-Shows web-app. Alles ist in Ordnung. Was ich möchte ist aber, wenn die gefilterte Suche leer ist, nicht angezeigt die <div> Meine aktuelle Implementierung funktioniert nicht, wenn...

Auch ich möchte für Sie etwas darstellen wie Please typ to search wenn ein Benutzer nicht irgendetwas eingeben...

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

====================
Nachdem einige der Antworten, dies ist, was ich geschaffen von Ihnen. Funktioniert Super jetzt!

<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>
InformationsquelleAutor User183849481 | 2014-09-16
  1. 24

    Können Sie tun 

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

//content

</div>

    Aber das hat ein performance-Problem ( mit filter mehrfach). Haben Sie einen Blick auf diese zu Wie die Anzeige der Länge der zu filternden ng-repeat-Daten

    • Ich habe neu für meine code, und aktualisieren Sie die Frage mit. Danke! 🙂
    • schön! In diesem Werk behandeln
    InformationsquelleAutor az7ar
  2. 1

    Siehe Beispiel arbeiten http://jsbin.com/nusoc/1/edit

    können Sie die Kiste filterdShows, filteredAllshows in Ihre repeater und verwenden Sie es in ng-show Direktive
    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>
    InformationsquelleAutor sylwester
  3. 0

    Wenn ich richtig verstehe, die Aufgabe, die Sie ersetzen sollten ng-show='shows.length > 0' durch ng-show='searchbar'

    • Dies funktioniert, wenn die Suchleiste leer ist, aber ich möchte auch für Sie zu verschwinden, wenn keine Ergebnisse gefunden werden.
    InformationsquelleAutor Alexey
Schreibe einen Kommentar