Search within TutorialsPark

AngularJS Modules : Filters

Learn how to build AngularJS application using Filter Modules, an Introduction

AngularJS Modules : Filters

Filters are Used to Transform the data before it is processed by Directive and displayed in view

The original source data in the Scope is not modified, thus allowing the same data the displayed in mutiple forms in different Sections of the Application.

Eg: Prices of mobile applications are displayed in the local currency of the user, buy converting USD into local currency.

AngularJS provides filters which are used to filter or/and format the data displayed to the user. Commonly filters are used for data-binding expressions but they can also be used within controllers, services and directives.

AngularJS Filters : Why Use a Filter?

Filters allow you to define data transformation, which then can be applied throughout the application without being attached to just one controller or Data type.

The data is transformed while is passed from the scope to directive, but the original source data is not transformed, enabling you to transform data for different views.

Transformation logic can also be applied to Controllers and Directives, but they are not reusable like Filter is, also the flexibility of the filters allow you to apply different filters to same behaviour and directives.

AngularJS Filters : Defining Filters

A filter is defined by inserting a vertical pipe {"|"} between the expression(to be filtered) and the filter(the filter applied)

The filter can have arguments as well, single as well as multiple, the argument and its value is seperated by a colon(:)

Below is a list of Built-in AngularJS Filter

Table: Angular JS Modules - Filters

Name Description Try It
filter To Select a subset of elements from an array and return the result in a new array. Try»
currency To Format a number as a Currency. Eg (10 to $10). Default currency symbol is $, but localization is available as well. Try»
number To format a number as a Text Try»
date Formats date to a string based on the specified Date Format. Try»
json When applied , converts a JavaScript object to a JSON String Try»
lowercase To convert string to all lowercase characters. Try»
uppercase To convert string to all uppercase character Try»
limitTo When applied , creates a new array or string comprising of only specified number of elements. Elements are taken either from the start or send of the source array. Try»
orderBy To order the specified array based on an expression. It creates an order alphabetically for strings and numerically for numbers. Try»

Syntax: AngularJS Modules Controller

AngularJS Filters : Currency Filter

The AngularJS Currency Filter is used to transform a number into a currency, Default currency symbol is $, but localized currency symbols are also available.

Syntax: AngularJS Modules Filters

Give it a TRY! » Note:The Source Value is not modified.

AngularJS Filters: Date Filter

AngularJS Date Filter is used to transform a Numerical String into a Data based on the date format specified.

Example: Angular JS Filters AngularJS Date Filter

Give it a TRY! » Note: The Source Value of date is not modified.