Viveka Viveka - 2 months ago 14x
AngularJS Question

how to use custom filter in angularjs

`In my code iam using custom filter for filtering gender(male,female).
but in my output when i click male it does not filter,but when i click female it shows filtered output consisting of only females. I dont know where is my mistake.

app.filter('myFilter', function () {
return function (items, filterby) {
var filtered = [];
var filtermatch = new RegExp(filterby, 'i');

for (var i = 0; i < items.length; i++) {

if (filtermatch.test(items[i].gender) {

return filtered;

<ul id="result">
<li ng-repeat="x in details | myFilter:filterby">
<div>Name: {{ }}</div>
<div>Address: {{x.address}}</div>
<div>Gender: {{x.gender }}</div>
<div>Country: {{}}</div>
<div>Agree: {{x.agree }}</div>

And this is my code for radio buttons male and female

<div class="form-group">

<label for="filterby" class="control-label col-xs-2">Filter By Gender</label>
<div class="radio">


<input type="radio" name="options" id="options2"
ng-model="filterby" value="female">
<label for="gender" class="control-label col-xs-2">Female</label>

<input type="radio" name="options" id="options2"
ng-model="filterby" value="male">
<label for="gender" class="control-label col-xs-2">male</label>


Apart from the fact that you are not using the sort argument, if you want to pass multiple parameters to a filter you separate them with :.

ng-repeat="x in details | myFilter:prop1:prop2">

This will call myFilter(details, prop1, prop2) and ngRepeat over the returned array.