Introduction
This article discusses angularjs filter and demonstrates how to use it, before continuing this article you should have knowledge basic of AngularJs, if you don't know to visit my previous article where I have demonstrates how to create simple helloworld application using AngularJs
Getting Started
Filters are used in AngularJsto search, filter, and format data. They can be used in view templates, controllers, or services. Angular comes with a collection of built-in filters. In view template(HTML) you can use filters with AngularJsexpression, directives and it customizes with your own as well. To apply filters use pipe character(|), the general syntax in templates is as follows:
In Expression
{{ expression [| filter_name[:parameter_value] ... ] }}
In Directives
<li ng-repeat="x in names | [| filter_name[:parameter_value] ... ] ">
Filters
AngulrJS provides following built-in filters- Date:- Format a date to string based on the requested format. For date several formats are available, most used formats are listed below.
- yyyy:-4 digits year example-1987
- yy:-2 ditits year example-87
- MMMM:-January-December
- MMMJan-Dec
- MM01-12
- M1-12(there is no zero leading)
- dd01-31
- d1-31(there is no zero leading)
- number :-This filter formats number to string, it can be used both in html and javascript.
- currency:- Filters a number to string as currency, you can define your own custom currency. When no currency symbol is provided, default symbol for current locale is used.
- lowercase:- Converts string to lowercase.
- uppercase:- Converts string to uppercase.
- filter:- Selects a subset of items from array and returns it as a new array. In my next article we will discuss in details.
- limitTo:- Creates a new array or string containing only a specified number of elements. Will discuss in next article
- orderBy: Returns an array containing the items from the specified collection, ordered by a comparator function based on the values computed using the expression predicate. We will discuss in details in my upcoming article
- json:- Allows you to convert a JavaScript object into JSON string.
Example:-
This example displays employee data in a table. Each data of the employee is formatted using AngularJs filters. It uses most used filters like date, number, and currency. In currency filter, we have used a custom currency symbol that "Rs"(Indian currency symbol). <HTML ng-app = "myapp">
<TITLE> AngularJS learning(Filters)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.employee={Name:"Kamal",Sex:"Male",DOB:new Date("April 16, 1992"),Salary:48000.5689};
});
</script>
<BODY ng-controller="myappcont">
<h2>Employee Details</h2>
<hr/>
<table border="1">
<tr>
<th>Property</th>
<th>Format Type</th>
<th>Original Value</th>
<th>Formated Value</th>
</tr>
<tr>
<td>Name:</td><td>Upper case</td><td>{{employee.Name}}</td><td>{{employee.Name|uppercase}}</td>
</tr>
<tr>
<td>Sex: </td><td>Lower case</td><td>{{employee.Sex}}</td><td>{{employee.Sex|lowercase}}</td>
</tr>
<tr>
<td>DOB:</td><td>Date Format</td><td>{{employee.DOB}}</td><td>{{employee.DOB|date:"dd/MM/yyyy"}}</td>
</tr>
<tr>
<td>Salary:</td><td>Number Format</td><td>{{employee.Salary}}</td><td>{{employee.Salary|number:3}}</td>
</tr>
<tr>
<td>Salary:</td><td>Currency Format</td><td>{{employee.Salary}}</td><td>{{employee.Salary|currency:"Rs.":2}}</td>
</tr>
</table>
</BODY>
</HTML>
Summary
Hope this article my helpful to you, please give comment for improving article.
Thanks