AngularJS gives us a simple API to create a custom
filter. You’ll remember that we use app.controller() to create controllers and
app.module() to create modules. In exactly the same way, AngularJS has given us
the angular.filter API to create a custom filter in AngularJS.
A custom filter
can be created using the following syntax:
MyApp.filter(‘filtername’, function(){
Return function(input,optionalparam1,optionalparam2)
{
var output;
// custom
filter here
return output;
}
})
To create a
custom filter, you need to do the following steps:
1.
Create a
filter using the app.filter by passing a custom filter name and a function as
input parameters to the app.filter()
2.
App.filter()
will return a function
3.
The
retuned function can take various optional input parameters
4.
The
returned function will have custom filter code and it will return the output.
CustomFilters.html
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>ng-repeat Directive</title>
<link href="Styles.css"
rel="stylesheet"/>
<script>
var
app = angular.module("myModule", []);
app.filter("gender", function(){
return function(gender){
switch(gender)
{
case 1 :
return "Male";
case 2 :
return "Female";
case 3 :
return "Not Disclosed";
}
}
});
app.controller("myController", function($scope){
var
employees = [
{firstName: "Linda", gender: 2, salary: 80000.45, city: "New York"},
{firstName: "axel",
gender: 1, salary: 59000.98, city: "Tokyo" },
{firstName: "Mark",
gender: 1, salary: 45000, city: "New York" },
{firstName: "shown", gender: 3, salary: 35000, city: "Tokyo" }
];
$scope.employees =
employees;
});
</script>
</head>
<body>
<div ng-app="myModule"
ng-controller="myController">
<table>
<thead>
<tr>
<th>FirstName</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees | filter:serchText">
<td>{{ employee.firstName }}</td>
<td>{{ employee.gender | gender }}</td>
<td>{{ employee.salary }}</td>
<td>{{ employee.city }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Style.css
File
body
{
font-family:
Arial;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid
black;
padding:
5px;
}
th
{
border: 1px solid
black;
padding:
5px;
text-align:
left;
}
Example
Explained :
In above
example we created custom filter named ‘gender’. Within the custom filter function we are assigning value
in switch case where Male for 1 , Female for 2 and Not Disclosed to 3. In script tag within
employee array we are passing this value to gender attribute.
Example :
{firstName: "Linda", gender: 2, salary: 80000.45, city: "New York"}
After
executing the program the gender value replaced with the actual value which is
given in the custom filter function. In above example the result will be like :
firstName: "Linda", gender: Female, salary: 80000.45, city: "New York"
No comments:
Post a Comment