Introduction To AngularJS - Day 10

Jeetendra Gund
Dec 28, 2015
7k
0
1
Article

In the 10th day of AngularJS article series, we are going to learning next key players/concept of AngularJS, understanding the concept of custom filters in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

Custom Filters

In this article we are going to manipulate data using AngularJS. The AngularJS framework has another useful component i.e. ‘filters’. The AngularJS framework allows us to create custom filters:

//Creating Custom Filter
app.filter("markCurrentYear", function ()
{
return function (input)
{
var currentYear = new Date()
.getFullYear();
if (currentYear == input)
{
return input + ' ' + '\u2713';
}
else
{
return input + ' ' + '\u2718';
}
};
});

The above code shows you how to create a filter with the help of object of module. The following is the way to use filter in HTML element:

<ul ng-repeat="emp in employees">
<li> Name : {{ emp.name }}
<br /> Year : {{ emp.joinYear | markCurrentYear }}
</li>
</ul>

The above HTML code shows you how to use created filter with expression. The following is the full code of above example:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Custom Filters in AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="viewController">
<h1>Welcome to C# Corner!</h1>
<h3>Creating Custom Filter in AngularJS</h3>
<ul ng-repeat="emp in employees">
<li> Name : {{ emp.name }}
<br /> Year : {{ emp.joinYear | markCurrentYear }} </li>
</ul>
</div>
<script type="text/javascript">
//Creating Module
var app = angular.module("myApp", []);
//Creating Controller using object of module 'app'
app.controller("viewController", function ($scope)
{
$scope.employees = [
{
'name': "Paritosh",
'joinYear': 2013
},
{
'name': "Sameer",
'joinYear': 2015
},
{
'name': "Prasad",
'joinYear': 2014
},
{
'name': "Makarand",
'joinYear': 2015
}];
});
//Creating Custom Filter
app.filter("markCurrentYear", function ()
{
return function (input)
{
var currentYear = new Date()
.getFullYear();
if (currentYear == input)
{
return input + ' ' + '\u2713';
}
else
{
return input + ' ' + '\u2718';
}
};
});
</script>
</body>
</html>

In the above code we have created a module and using that module we have created a custom filter ‘markCurrentYear’ with parameter. We have created list of employees in controller with ‘name’ and ‘joinYear’ property. In created filter we apply on ‘joinYear’, when filter apply ‘joinYear’ comes as input to filter and we check which condition is it, current year or not. Then we add with that input value check mark and cross mark as present or not using there numeric value. See the following output after applying the filter:

In the above output you can see if the employee joined in current year then check mark is added otherwise cross mark is added with value.

Great, we learned creating custom filters in AngularJS with example successfully.

Summary

I hope that beginners as well as students understand concept of Custom Filter in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!