Web
Analytics
angular filter tutorial and examples - Tutorial

For Consultation : +91 9887575540

Stay Connected :

Purpose of Filters

A filter formats the value of an expression for display to the user.

 

Filters can be added to expressions and directives using a pipe character. AngularJS filters can be used to transform data:

FilterDescription
uppercaseReturns the upper case of the string.
lowercaseReturns the lower case of the string
orderBy: ‘Field’Orders an array by an expression. Should be used with ng-repeat only
currencyConverts a number to a currency format.
number : digitsAfterDecimalNumber rounded to decimalPlaces and places a “,” after each third digit
filter : modelSelect a subset of items from an array as matted in the model.
date : formatReturns a date as per specified format
json : spacesAllows you to convert a JavaScript object into JSON string.Default spacing is 2 spaces

Example to demonstrate all filters

 

Example to demonstrate all filters

angularjs Date Examples:

In Html Template:

Enter Date:

Medium Format: {{GetDate(SomeDate) | date: ‘medium’}}

yyyy-MM-dd HH:mm:ss Z

Format: {{GetDate(SomeDate) | date:’yyyy-MM-dd HH:mm:ss Z’}}
dd/MMM/yyyy @

h:mma Format: {{GetDate(SomeDate) | date:’dd/MMM/yyyy @ h:mma’}}

filters in angular 1

Number formatting:

angular date filter

angular JSON Filter: Allows you to convert a JavaScript object into JSON string Its mostly used for debugging:

angular custom filters

To write a custom filter we need to register a new filter factory function with the module.

This factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function.

Note: filter names must be valid angular expression identifiers, such as uppercase or orderBy. Names with special characters, such as hyphens and dots, are not allowed.

Static Custom Filter:

The following sample filter reverses a text string. In addition, it conditionally makes the text upper-case

angularjs ng-repeat filter

Select your currency