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
|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 ProjectGive 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 ValuesGive 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 DataGive 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 DirectivesGive 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 DirectiveGive it a TRY! » Note: There are no alternative configuration options available for these filter
AngularJS Filters : Generating JSON
Example: AngularJS Filters Generating JSONGive 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.