1

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

我错过了什么吗?提前致谢!

4

1 回答 1

2

使用(books|filter:search).lengthasbooks.length将始终返回base不受其影响的数组的长度filter

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

小提琴

于 2016-03-03T07:26:26.273 回答