AngularJS Training

- Day #5
By
George

Agenda

Filtering
Formatting Filters
Filtering Repeaters
Chaining Filters
Assigning Filter Output To Variables
Implementing Custom Filters

Filtering

In AngularJS, a filter provides a way to format data to display to the

user.

Angular gives us several built-in filters as well as an easy way to

create our own.

Filters are invoked in the HTML with the | (pipe) character in the
template binding characters {{ }}.

Syntax :
{{student.fullName() | uppercase}}

Filtering

We can also use filters from within JavaScript by using the $filter service.
For instance, to use the uppercase JavaScript filter:

To pass an argument to a filter, we pass it with a colon after the filter name

We can use multiple filters at the same time by using two or more pipes.

Filtering Repeaters
Filters are used to change
modify the data and can be
clubbed in expression or
directives
using
pipe
character. Following is the list
of commonly used filters.

Use of the filter filter: The

filter function uses the query
value to create a new array
that contains only those
records that match the query.

http://angular.github.io/angula
r-phonecat/step-3/app/

Formatting Filters
AngularJS comes with a set of built-in
formatting filters which can be used in
conjunction with the interpolation directive,
and with ng-bind. Here is a list of the
formatting filters:

date filter

Formats date to a string based on the requested format.

format string can be composed of the following elements:

'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
'MMMM': Month in year (January-December)
'MMM': Month in year (Jan-Dec)
'MM': Month in year, padded (01-12)
'M': Month in year (1-12)
'dd': Day in month, padded (01-31)
'd': Day in month (1-31)
'EEEE': Day in Week,(Sunday-Saturday)
'EEE': Day in Week, (Sun-Sat)
'HH': Hour in day, padded (00-23)
'H': Hour in day (0-23)
'hh': Hour in AM/PM, padded (01-12)
'h': Hour in AM/PM, (1-12)
'mm': Minute in hour, padded (00-59)
'm': Minute in hour (0-59)
'ss': Second in minute, padded (00-59)
's': Second in minute (0-59)
'sss': Millisecond in second, padded (000-999)
'a': AM/PM marker
'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year
'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')
'GGGG': The long form of the era string (e.g. 'Anno Domini')

date filter

format string can also be one of the following predefined localizable

formats:
'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3,
2010 12:05:08 PM)
'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05
PM)
'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday,
September 3, 2010)
'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3,
2010)
'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08
PM)
'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

date filter - Examples

Code ref : http://plnkr.co/edit/?p=preview

Currency Filter

Formats a number as a currency (ie $1,234.56). When no currency symbol

is provided, default symbol for current locale is used.

http://plnkr.co/edit/?p=preview

Number filter

If the input is null or undefined, it will just be returned.

If the input is infinite (Infinity/-Infinity) the Infinity symbol '' is returned.
If the input is not a number an empty string is returned.

http://plnkr.co/edit/?p=preview

lowercase filter
Converts string to lowercase.

uppercase filter
Converts string to uppercase.

orderBy filter
Orders a specified array by the expression predicate
It is ordered alphabetically for strings and numerically for
numbers.

http://plnkr.co/edit/?p=preview

limitTo filter

Creates a new array or string containing only a specified number of elements.

The elements are taken from either the beginning or the end of the source array,
string or number, as specified by the value and sign (positive or negative) of limit
if a number is used as input, it is converted to a string.

http://plnkr.co/edit/?p=preview

json
Allows you to convert a JavaScript object into JSON
string.

http://jsfiddle.net/hbyNN/

Chaining Filters

It is possible to chain filters by simply putting more filters after each other
in the filter section.

When chaining filters, the output of one filter is used as input for the next
filter in the chain.

Here is an example:

This example first limits the string myData.theText to 5 characters using

the limitTo filter, and the converts the 5 characters to uppercase using the
uppercase filter

Assigning Filter Output To Variables

It is possible to assign the output of a filter
to a temporary variable which you can
then refer to later in your view. Here is an
example:

Custom Filter

To create a filter, we put it under its own module

Filters are just functions to which we pass input. In the function above, we simply take
the input as the string on which we are calling the filter. We can do some errorchecking inside the function:

Custom Filter