In this AngularJS custom filter example you will learn how to create custom filter in angularjs using filter method.
Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.
Syntax
var app = angular.module('app', []); app.filter('pascalCase',function(){ //write filter code here });
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Create custom filter in AngularJS
using filter method Example</title>
<script>
var app = angular.module('app', []);
app.filter('displayGender',function(){
return function(value){
if(value == 1)
return 'Male';
else if(value == 2)
return 'Female'
else
return 'Not disclosed';
};
});
app.controller("ParentController", function ($scope) {
$scope.employees = [{
firstName:"jimi",
lastName:"Scott",
jobTitle:"Developer",
gender: 1,
salary:20000,
phone:"345-333-7845"
},
{
firstName:"Bailey",
lastName:"Lee",
jobTitle:"Lead",
gender: 2,
salary:30000,
phone:"322-121-213"
},
{
firstName:"Aura",
lastName:"Martin",
gender: 2,
jobTitle:"QA",
salary:35000,
phone:"322-333-0987"
},
{
firstName:"Austin",
lastName:"Williams",
jobTitle:"Designer",
gender: 1,
salary:20000,
phone:"322-265-2321"
}];
});
</script>
</head>
<body style="background-color:#DDE4E9;">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS Create custom filter in AngularJS using
filter method Example</legend>
<div ng-app="app">
<div ng-controller="ParentController">
<ul ng-repeat="emp in employees">
<li>Name : {{ emp.firstName + ' ' + emp.lastName}}</li>
<li>Job Title : {{ emp.jobTitle}}</li>
<li>Name : {{ emp.gender | displayGender}}</li>
<li>Salary : {{ emp.salary }}</li>
<li>Phone : {{ emp.phone }}</li>
</ul>
</div>
</div>
</div>
</fieldset>
</body>
</html>