Custom Filters in AngularJS
Custom Filter is a filter that returns a function.
Remember in our previous articles 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 function to create a custom filter in AngularJS.
Steps to create custom filter
- Creating custom filter in AngularJS is quite easy. To create custom filter you need to register a new filter function with your module.
- Create a filter using the Module.filter by passing a custom filter name and a function as input parameters.
- Module.filter() will return a function
- The retuned function can take various optional input parameters
- The returned function will have custom filter code and it will return the output.
Custom Filter is a filter that returns a function.
Remember in our previous articles 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 function to create a custom filter in AngularJS.
Steps to create custom filter
- Creating custom filter in AngularJS is quite easy. To create custom filter you need to register a new filter function with your module.
- Create a filter using the Module.filter by passing a custom filter name and a function as input parameters.
- Module.filter() will return a function
- The retuned function can take various optional input parameters
- The returned function will have custom filter code and it will return the output.
Syntax:
var app = angular.module('myApp', []);
app.filter('FilterName', function() {
return function(input, optparameter1, optparameter2) {
return variable;
};
})
Let us create a very simple custom filter which will convert case of String to upper case . We can apply this custom filter on a string and it will return the string with each character in capital case.
<!DOCTYPE html>
<html>
<head>
<title>My first AngularJS Custom Filter Code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.filter('toUpperCase', function() {
return function (input)
{
var output = "";
output = input.toUpperCase();
return output;
};
})
app.controller('ProductController', function($scope) {
$scope.products = [
{ 'name': 'pen', 'price': '20' },
{ 'name': 'pencil', 'price': '5' },
{ 'name': 'book', 'price': '400' },
{ 'name': 'Sharpener', 'price': '5' },
{ 'name': 'eraser', 'price': '5' },
];
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="ProductController">
<table class="table">
<tr ng-repeat="product in products">
<td>{{product.name|toUpperCase}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
</html>
we’ll get the product name rendered in capital case on the view as shown in the image below:
Output:
Custom filter using parameters
You can make your filter customizable by introducing input parameters. In the above example input parameter is not used.However, what if your application needs to have one? This can also be implemented by the steps mentioned below.
In the above example, we have taken each character of the string and returned them in upper case. In the case of the next filter, we are just going to pass the position and just the character at that position will be rendered as a capital letter.
Example
<!DOCTYPE html>
<html>
<head>
<title>My first AngularJS Custom Filter Code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.filter('toPositionUpperCase', function() {
return function (input,position)
{
var output = [];
var capLetter = input.charAt(position).toUpperCase();
for (var i = 0; i < input.length; i++) {
if (i == position) {
output.push(capLetter);
} else {
output.push(input[i]);
}
}
output = output.join('');
return output;
};
})
app.controller('ProductController', function($scope) {
var products = [
{ 'name': 'pen', 'price': '200' },
{ 'name': 'pencil', 'price': '400' },
{ 'name': 'book', 'price': '2400' },
{ 'name': 'ball', 'price': '400' },
{ 'name': 'eraser', 'price': '1200' },
];
$scope.products = products;
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="ProductController">
<table class="table">
<tr ng-repeat="product in products">
<td>{{product.name|toPositionUpperCase :2}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
</html>
Here, the third letter of every product names is rendered as the capital letter on the view.
Output:
References :- AngulaJS Documentation
Related Articles
