Here we will lear custom filters in angularjs, use of custom filters and how to create custom filters in angularjs applications with example,
In angularjs, custom filters are used to create our own filters to format data and it will increase reusability of code. Suppose in angularjs application if we need common format of data in multiple pages then it's better to use custom filter. By creating custom filters we can reduce redundancy of code in angularjs applications.
Following is the syntax of using custom filters in angularjs application.
We will see how to create and use custom filter in angularjs with simple example.
Following is the example of creating custom filter in angularjs to format data.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Custom Filter Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularcustomapp', []);
app.filter('convertUpper', function () {
return function (item) {
return item.toUpperCase();
};
});
app.controller('CustomCtrl', function ($scope) {
$scope.name = 'Welcome to Tutlane.com';
});
</script>
</head>
<body ng-app="angularcustomapp">
<div ng-controller="CustomCtrl">
<p>
{{ name | convertUpper }}
</p>
</div>
</body>
</html>
If you observe above code we created custom filter "convertUpper" to convert text to uppercase and used it in code to format name field. Now we will run and see the output of example.
Following is the result of custom filter example in angularjs application.
This is how we can create and use custom filters in angularjs applications.