I am trying to create advance search using angular query on different available parameters of the book objects.
The html is :
<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>
Basically, I wanted to build query with search box 'query' and the dropdown select valued 'queryBy'.
List of books in the table contains book object in following pattern:
[
{
"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"
},
.
..
..
]
The searching works well with 'Title' and 'Subject' of the book. But, not working with 'authors', 'keywords'. How to make search within inner objects of the book variable?
