Ng-Pokaż, czy filtrowane wyszukiwanie nie jest puste?

Question

Aktualnie jestem w trakcie tworzenia wyszukiwania na żywo mojej aplikacji internetowej TV Shows. Wszystko działa dobrze. Chciałbym jednak, jeśli filtrowane wyszukiwanie jest puste, aby nie wyświetlać <div> Moja obecna implementacja nie działa jednak ...

Chciałbym również wyświetlić coś takiego, jak Please typ to search, jeśli użytkownik nie robi ". t wpisać cokolwiek ...

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

==================== Po niektóre odpowiedzi, to co stworzyłem z nich. Działa teraz świetnie!

<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

Można zrobić

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

// content 

</div> 

Ale to ma problem z wydajnością (przy użyciu filtra kilka razy). Spojrzeć na to też How to display length of filtered ng-repeat data

Answer 2

Gdybym poprawnie zrozumieć zadanie należy wymienić ng-show='shows.length > 0' przez ng-show='searchbar'

Answer 3

proszę zobaczyć przykład roboczych http://jsbin.com/nusoc/1/edit

można paka filterdShows, filteredAllshows w peryferyjnym i używać go w dyrektywie ng-show tj:

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