AngularJS Custom Filter Function with Example

Here we will lear custom filters in angularjs, use of custom filters and how to create custom filters in angularjs applications with example,

AngularJS Custom Filter

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.

Syntax of AngularJS Custom Filter

Following is the syntax of using custom filters in angularjs application.

 

{{ customexpression | customfilter }}

We will see how to create and use custom filter in angularjs with simple example.

AngularJS Custom Filter Example

Following is the example of creating custom filter in angularjs to format data.

 

Live Preview

<!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.

Output of AngularJS Custom Filter Example

Following is the result of custom filter example in angularjs application.

 

WELCOME TO TUTLANE.COM

This is how we can create and use custom filters in angularjs applications.