Built-In And Custom AngularJS Filters With Examples

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 -

1. formatting of text or numbers etc.
2. sorting data
3. 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 }}

Output

"STRING"

Plunker- uppercase

 

Number

The Number filter is used for formatting numbers. It formats a number as text in case if the number is

1. null or undefined nothing will be returned
2. infinite infinity symbol will be returned
3. 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

1. 3.142
2. 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

1. $49.00
2. EURO49.00
3. EURO49

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

1. 2010-10-29 08:40:23 +0500
2. 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) {
        //inner function
        //modify input logic
        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