Angular Search查询不能与高级搜索配合使用

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> 

基本上，我想用搜索框来构建查询“查询”和下拉列表中选择有价值的“queryBy”。

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

[ 
    { 
     "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" 


    }, 
. 
.. 
.. 

] 

的检索与“标题”和这本书的“主题”效果很好。但是，不与'作者'，'关键字'合作。 如何在书籍变量的内部对象中进行搜索？

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