i have a sample table below:
function detailsFBG($scope) {
$scope.names = [
{name:'Srikanth', bg:'AB+',city:'hyderabad',phone:#########,country:'India',address:'4-4-47,Laxmi Nivas',email:'#########'},
{name:'Mounika', bg:'AB+',city:'karimnagar',phone:#########,country:'India',address:'4-4-47,Laxmi Nivas',email:'#########'},
{name:'Prashanath', bg:'B+',city:'begumpet',phone:#########,country:'India',address:'4-4-47,Laxmi Nivas',email:'#########'},
{name:'Pullela Raju',bg:'o+',city:'hyderabad',phone:#########,country:'India',address:'rajapoor,mutharam',email:'#########'},
{name:'Pullela Raju',bg:'B+',city:'chennai',phone:#########,country:'India',address:'rajapoor,mutharam',email:'#########'}
];
}
Now i have html select tag:
<div data-role="content" class"ui-content">
<h1 align="center">Search by Blood Group ....</h1>
<form action="#page-Search">
<div class="ui-content" class="ui-controlgroup-controls">
<select>
<option>A+</option>
<option>A-</option>
<option>AB+</option>
<option>AB-</option>
<option>O+</option>
<option>O-</option>
</select>
<p><input type="text" placeholder="Search by Blood Group" ng-model="searchBlood"/></p>
<p><input type="text" placeholder="Filter by City)" ng-model="searchCity"/></p>
</div>
<table data-role="table" data-mode="columntoggle" class="ui-responsive" class="ui-screen-hidden" align="center">
<thead>
<tr>
<th>Full Name</th>
<th>Phone Num</th>
<th>Blood Group</th>
<th>City</th>
<th>Country</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter:{bg:searchBlood, city:searchCity} ">
<td>{{ x.name }}</td>
<td>{{ x.phone }}</td>
<td>{{ x.bg }}</td>
<td>{{ x.city }}</td>
<td>{{ x.country}}</td>
<td>{{x.address}}</td>
<td>{{x.email}}</td>
</tr>
</tbody>
</table>
</form>
</div>
Based on Bloodgroup and city to display table data.
By using select tag i want to filter my table and if i enter city in my textbox also filter data and display only selected data in jquery or java script.
please forget about angularjs code.