角度搜索查询不适用于高级搜索

Question

我正在尝试使用对书籍对象的不同可用参数的角度查询来创建高级搜索。

html 是：

<div class="row row-height" ng-app='bookApp'>
    <div class="col-sm-12 login-col" style="margin-top: 2%;" ng-controller="BookSearchController">

        <div class=" row event-header" style="margin-bottom:12px;">
            <div class="col-sm-3">
                <label style="font-size:25px;" class="control-label">Book Search</label>
            </div>

        </div>

        <div class="input-group" id="adv-search">
                <input type="text" ng-model="query[queryBy]" class="form-control" placeholder="Search for Books" />
                <div class="input-group-btn">
                    <div class="btn-group" role="group">
                        <div class="dropdown dropdown-lg">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                            <div class="dropdown-menu dropdown-menu-right" role="menu">
                                <form class="form-horizontal" role="form">
                                  <div class="form-group">
                                    <label for="filter">Filter by</label>
                                    <select class="form-control" ng-model="queryBy">
                                        <option value="$" selected>All Books</option>
                                        <option value="title">Title</option>
                                        <option value="subject">Subject</option>
                                        <option value="authors">Authors</option>
                                        <option value="keywords">Keywords</option>
                                    </select>
                                  </div>


                                  <button type="submit" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i>
</button>
                                </form>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i>
</button>
                    </div>
                </div>
            </div>


                 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Title</th>
                        <th>Subject</th>
                        <th>Authors</th>
                        <th>Edition</th>
                        <th>Available</th>
                    </tr>
                </thead>
                <tbody class="">

                    <tr ng-repeat="book in books | filter:query track by $index">
                        <td>
                            <h4><span class="">{{$index + 1}}</span></h4>
                        </td>
                        <td>
                            <h4><span class="">{{book.title}}</span></h4>
                        </td>
                        <td>
                            <h4><span class="">{{book.subject}}</span></h4>
                        </td>
                        <td>
                            <h4 ng-repeat="a in book.authors">
                            <span > {{a.name}}</span>
                           </h4>
                        </td>
                        <td>
                            <h4><span class="">{{book.edition}}</span></h4>
                        </td>
                        <td>
                            <h4><span class="">

                            <span ng-show="book.availability">YES</span>
                            <span ng-show="!book.availability">NO</span>

                            </span></h4>
                        </td>


                    </tr>
                </tbody>
            </table>

    </div>
</div>

基本上，我想使用搜索框“query”和下拉选择值“queryBy”来构建查询。

表格中的书籍列表包含以下模式的书籍对象：

[
    {
        "id": 47,
        "title": "Finance Management",
        "subject": "Finance",
        "ISBN": "4099",
        "publisher": {
            "id": 9,
            "name": "Kummanar123",
            "publication_year": 2014,
            "publication_place": "Kath"
        },
        "authors": [
            {
                "id": 10,
                "name": "Samir pathak"
            },
            {
                "id": 11,
                "name": "Suman sharma"
            }
        ],
        "edition": "2",
        "availability": true,
        "keywords": [
            {
                "text": "tax"
            },
            {
                "text": "finance"
            }
        ],
        "number_of_pages": 1111,
        "barcode": "2063"


     },
.
..
..

]

搜索适用于图书的“标题”和“主题”。但是，不使用“作者”、“关键字”。 如何在 book 变量的内部对象中进行搜索？

Answer 1

尝试从您的 ng-model 中删除 [] -

<input type="text" ng-model="query" class="form-control" placeholder="Search for Books" />

在您的controller 中定义它-

$scope.query;

最后把你的filter改成

<tr ng-repeat="book in books | filter:query ">