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.

• 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/angular-phonecat/step-3/app/

Filtering Repeaters

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 error-checking inside the function:

Custom Filter