Как я могу показать строку «Нет книг», если в фильтре возвращается значение null?

Question

Я пытаюсь показать «Не найдено книг!» если угловой фильтр не возвращает результат в AngularJs.

Но я не могу как-то заставить его работать. Вот мой HTML-код:

  <div class='col-md-6'> 
       <div class='row'> 
        <div class="col-md-12"> 
         <div class="input-group"> 
          <input type='text' ng-model='search' class='form-control' aria-describedby="basic-addon2"> 
          <span class="input-group-btn"> 
           <button class="btn btn-default" type="button"><i class='glyphicon glyphicon-search'></i></button> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class='row' id='search-table'> 
        <div class="col-md-12"> 
         <table class='table table-bordered table-hover table-collapse' ng-init="books = [{ 
           title : 'The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing', 
           author : 'Marie Kondo', 
           price : '9.68' 
          }, 
          { 
           title : 'Quieting Your Heart: 6-Month Bible-Study Journal', 
           author : 'Darlene Schacht', 
           price : '7.14' 
          }, 
          { 
           title : 'First 100 Words', 
           author : 'Roger Priddy', 
           price : '3.19' 
          }]"> 
          <thead> 
           <th> TITLE </th> 
           <th> AUTHOR </th> 
           <th> PRICE </th> 
          </thead> 
          <tbody> 
           <tr ng-repeat="book in books | filter:search"> 
            <td> {{ book.title }} </td> 
            <td> {{ book.author }} </td> 
            <td> {{ book.price }} </td> 
           </tr> 
           <tr class='info' ng-show="!books.length"> 
            <td colspan=3> <i class='glyphicon glyphicon-info-sign '></i> No Books Found </td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 

ли я что-то отсутствует? Заранее спасибо!

Answer 1

Используйте (books|filter:search).length, как books.length всегда будет возвращать длину base массива, который не влияет на filter

(books|filter:search).length возвращает length массива после применения фильтра.

Fiddle