This article will demonstrate built-in AngularJS Filters as well as how you can create your own custom Filters in AngularJS. This article begins with a brief introduction to AngularJS Filters. Afterwards, it demonstrates built-in AngularJS Filter with syntax and links to an example on Plunker Editor. Finally, the article discusses custom AngularJS Filters.
AngularJS Filters
AngularJS filters are used to modify output.Through filters, you can modify output in three ways -
- formatting of text or numbers etc.
- sorting data
- filtering data
Built-in AngularJS Filters
AngularJS provides couple of built-in filters through which you can format your data. Their syntaxes and usage scenerios are as follow.
Lowercase
The Lowercase filter is used for transforming the characters of a string into lowercase. It takes a piece of string as an input and converts it into lowercase string.
Syntax
- {{ "STRING" | lowercase }}
Output
"string"
Plunker- lowercase
Uppercase
The Uppercase filter is used for transforming the characters of a string into uppercase. It takes a piece of string as an input and converts it into uppercase string.
Syntax
- {{ "string" | uppercase }}
Number
The Number filter is used for formatting numbers. It formats a number as text in case if the number is
- null or undefined nothing will be returned
- infinite infinity symbol will be returned
- not a number an empty string will be returned
Syntax
- {{number or string | number [: fractionsize(default-3)] }}
fractionsize is optional. It specifies the number of decimal places to round the number to. Its default value is 3.
Example
- {{ 3.14156878 | number }} (default fraction size)
- {{ 3 | number : 2 }} (fraction size 2)
Output
- 3.142
- 3.00
Plunker- number
Currency
The Currency filter is used to format numbers into currency.
Synatx
- {{ number | currency [: symbol][: fractionsize ]| }}
Symbol and fraction size are optional. Their default values are taken from current locale if not specified.
Example
- {{ 49 | currency }} (default currency and fraction size)
- {{ 49 | currency:"EURO" }} ( e.g 'EURO' currency and default fraction size)
- {{ 49 | currency:"EURO" :0}} ( e.g 'EURO' currency and 0 fraction size)
Output
Plunker- currency
Date
Date filter is used to format dates into string based on specified format.
Syntax
- {{ Yourdate | date[ : format] [:timezone] }}
format and timezone are optional. Angular provides number of predefined localizable formats -
- 'medium' equals to 'MMM d, y h:mm:ss a'
- 'short' equals to 'M/d/yy h:mm a'
- 'fullDate' equals to 'EEEE, MMMM d, y'
'longDate' equals to 'MMMM d, y''mediumDate' equals to 'MMM d, y''shortDate' equals to 'M/d/yy'
'mediumTime' equals to 'h:mm:ss a'
'shortTime' equals to 'h:mm a'
The default format is mediumDate if not specified.
Example
- {{ 1288323623006 | date : 'yyyy-MM-dd HH:mm:ss Z' }}
- {{1288323623006 | date:'yyyy-MM-dd'}}
Output
- 2010-10-29 08:40:23 +0500
- 2010-10-29
Plunker- date
JSON
The json filter is used for debugging purpose and prints the JavaScript object as JSON string
Syntax
- {{ object | json [: spacing] }}
spacing is optional and used for indentation purpose. Its default value is 2.
Example
{{ { 'name' : 'abc' } | json }}
Output
{ "name": "abc" }
Plunker- json
orderBy
orderBy filter is used with ngRepeat directive and orders data by a certain field.
Syntax
- {{ array or collection | orderBy [: expression][: reverse ][: comparator] ] }}
expression reverse and comparator are optional.
- expresion can be a string,function or an array
- reverse will reverse the sorting order if its value is specified to true
- comparator function determine the relative order
Example
[ { id : '2' } , { id : '1' } ] | orderBy : 'id'
Output
[ { id : '1' } , { id : '2' } ]
Plunker-orderBy
limitTo
limitTo filter is used to limit your data upto specific length. It creates a new string or array of elemetns of specified length.
Syntax
- {{ string,number,array | limitTo:limit [:begin] }}
limit specifies the length of returning elements and begin specifies the index from where the limit starts. begin is optional and its default value is 0.
Example
{{ 'abcdefghjildjkdf ' | limitTo : 3 }}
Output
'abc'
Plunker-limitTo
Filter
Filter is used with ngRepeat directive, and filters records for specified expression. It selects subset of array based on expression, and returns it as a new array.
Syntax
- {{ array or collection | filter : expression [: comparator][: anyPropertyKey] }}
Expression can be a string, object, or a function. Comparator is optional and its value specifies the matching mechanism between the filtered value based on expression and actual array. anyPropertyKey is optional and is used to specify the property for matching.
Plunker- filter
Custom Filter
Custom filters can be created easily by using filter function of Angular module. Filter function takes two parameters - the first one is name of the filter and the second one is a function. This function itself returns a function. The inner function takes parameters for inputs on whcih you want to apply formatting, and contains logic to modify input values.
Syntax
- angular.module('myApp').filter('CustomFilterName', function() {
- return function(inputparamter, otherparameters) {
-
-
- return output;
- }
- }
- });
Plunker- Custom Filter Example
Summary
In this article, we saw how we can format data by using built-in AngularJS filters and how we can display data after modifications of our own choice by creating custom filters in AngularJS