Users Online
· Members Online: 0
· Total Members: 188
· Newest Member: meenachowdary055
Forum Threads
Latest Articles
Articles Hierarchy
#0010 AngularJS Custom Filter with Example
AngularJS Custom Filter with Example
Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering output. In such a case a custom filter can be created which can pass the output in the required manner.
In the below example we are going to pass a string to the view from the controller via the scope object, but we don't want the string to be displayed as it is.
We want to ensure that whenever we display the string, we pass a custom filter which will append another string and displayed the completed string to the user.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.filter('Demofilter',function(){
return function(input)
{
return input + " Tutorial"
}
});
app.controller('DemoController',function($scope){
$scope.tutorial ="Angular";
});
</script>
</body>
</html>
Code Explanation:
- Here we are passing a string "Angular" in a member variable called tutorial and attaching it to the scope object.
- Angular provides the filter service which can be used to create our custom filter. The 'Demofilter' is a name given to our filter.
- This is the standard way in which a custom filter is defined wherein a function is returned. This function is what contains the custom code to create the custom filter. In our function, we are taking a string "Angular" which is passed from our view to the filter and appending the string "Tutorial" to this.
- We are using our Demofilter on our member variable which was passed from the controller to the view.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
- It can be seen that our custom filter has been applied and
- The word 'Tutorial' has been appended at the end of the string, which was passed in member variable tutorial.
Summary:
If there is a requirement that is not met by any of the filters defined in angular, then you can create your custom filter and add your custom code to determine the type of output you want from the filter.a
