JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-controller="testCtrl as test">
<select name="" id="" ng-model="test.filterByState">
<option value="">Select a state</option>
<option value="TN">TamilNadu</option>
<option value="KE">Kerala</option>
<option value="AN">Andra Pradesh</option>
</select>
<select name="" id="" ng-model="test.filterByGender">
<option value="">By Gender</option>
<option value="f">Female</option>
<option value="m">Male</option>
</select>
<select name="" id="" ng-model="test.filterByAge">
<option value="">Select All</option>
<option value="<25">Less Than 25</option>
<option value=">25">Greater Than 25</option>
</select>
<table>
<tr ng-repeat="subject in test.subjects |filter:{location:test.filterByState, gender:test.filterByGender}|filter:test.filterByAgeFn">
<td>{{subject.name}}</td>
<td>{{subject.location}}</td>
<td>{{subject.age}}</td>
</tr>
</table>
</div>
JavaScript
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
vm = this;
vm.subjects = [
{
name : "Alpha",
location:"TN",
age : "25",
gender:"f"
},
{
name : "Beta",
location:"TN",
age : "44",
gender:"m"
},
{
name : "Gamma",
location:"KE",
age : "20",
gender:"f"
},
{
name : "Theta",
location:"AN",
age : "22",
gender:"f"
},
];
vm.filterByAge = '';
vm.filterByState='';
vm.filterByGender='';
vm.filterByAgeFn = function(subject){
filterReturn = true;
if(vm.filterByAge){
switch(vm.filterByAge){
case '<25':
if(parseInt(subject.age) >= 25){
filterReturn = false}
case '>25':
if(parseInt(subject.age) < 25){
filterReturn = false}
}
}
return filterReturn;
}
})