Search within TutorialsPark

AngularJS Filters: Single Data Values

Learn how to use AngularJS Filters for filtering Single Data Values.

AngularJS Filters: Introduction

The AngularJS Filters are used to filter or format the data provided in the view.Filters are mostly applied to data binding expression within the templates.

Filters can be used within controllers, services and directives.They can used to perform many types of transformations, but generally its used to sort or format data model.

Filters can be used anywhere within the application, without being attached to any specific data or controller. Filters manipulate the data as it moves from the scope to the directive but the source data remains unchanged.

AngularJS Filters: Basic Usage

The AngularJS Filters simply transform the value of expression based on the requirements specified, the original source data is not manipulated at all.

To Invoke a filter user the character | (pipe), the filter to be applied is specified after the pipe(|)

Syntax : AngularJS Filters Filter Basics

AngularJS Filters: Filter Single Data Values

AngularJS built-in filters can be classified into two types, the ones that are used on single values and the ones that are used on collection of values

Table : AngularJS Values of Build-in ng-repeat Values

Name Description
currency It is used to filter formats of currency Values
date It is used to filter formats of data Values.
json This filter is used to generate an object from a JSON string
uppercase Filter is used to format a string to all uppercase.
lowercase Filter is used to format a string to all lowercase.

AngularJS Filters: Setting up the Example Project

In order to understand AngularJS filters in detail, we create an Student Example, here the controller is defined with a scope containing Students array, comprising of name of students, dept, date of Birth and fees.

The directive ng-repeat is used to generate table rows to display the elements of student object.

Example: AngularJS Filters Setting up the Example Project

Give it a TRY! » Note:Notice that the currency and date values are not in proper format.

AngularJS Filter : Currency Filter

AngularJS Currency Filter is used to format a number as currency value, in order to apply filter to the data binding, the binding source is appended by a bar symbol(the | character) and followed by the name of filter.

The default currency symbol is $ , but you have an option to set other curreny as well. Also, the values are rounded off automatically to show two decimal values.

Example: Angular Filters Currency Values

Give it a TRY! » Note:Earlier no currency value was specified, but now the default currency value appears before the amount.

AngularJS Filters : Setting Specific currency Values

AngularJS Currency Filters allows you set your custom currency other than the default $.

To set alternative currency symbol, follow the name of the filter with the character colon(:) , follow it up with the symbol to be used as literal string.

Example: Angular JS Controllers Getting Keys along with Data

Give it a TRY! » Note:The currency symbol used is India Rupee

AngularJS Filters : Format Numeric Values

The AngularJS filter of number is used to format numeric data values to set the number of decimal values, or for rounding off numbers.

in the demo, we have used the filter number to display value in fees column with four decimal places.

Example: AngularJS Template Directives Using Built-in Directives

Give it a TRY! » Note:The value of the filter number specifies the number of decimal places to be set.

AngularJS Filters : Filtering the String Case

The AngularJS filters of uppercase and lowercase are used to format strings to display all characters in uppercase or lowercase.

In the demo, we have set the first column in complete uppercase while the second column is set in complete lowercase

Example: AngularJS Directives Hide Unevaluated Expression using ng-cloak Directive

Give it a TRY! » Note: There are no alternative configuration options available for these filter

AngularJS Filters : Generating JSON

The AngularJS Filter json is used to generate a JSON string from a JavaScript Object.

Example: AngularJS Filters Generating JSON

Give it a TRY! » Note: There are not much practical application of JSON filter.

AngularJS Filters : Localized Filter Output

The AngularJS filters of currency, number and date support various localized formats using localization files.

In the demo, we have included a script element to add the Japanese language localization files, we have applied currency filter, hence Japanese Yen is displayed as the default Currency.

Example: AngularJS Filter Localization Filters

Give it a TRY! » Note:Due the Localization files, the default currency is the Japanese Yen.