javascript - 如果在过滤器中返回空值，如何显示 'No Books Found' 行？

Question

我正在尝试显示“未找到书籍!”如果 Angular 过滤器在 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

Use (books|filter:search).length as books.length will always return length of the base array which is not being affected by filter

(books|filter:search).length 将在应用过滤器后返回数组的 length。

Fiddle