Mastering Web Application

(Rick Simeone) #1

Displaying and Formatting Data


Where the included fragment specifies input's type as static string.


Pay attention to scoping issues when using this technique
as ng-include creates a new scope.

Custom HTML elements and older versions of IE


Lastly, we need to mention that custom HTML elements and attributes are not well
supported by Internet Explorer Version 8 and earlier. There are additional steps that
must be undertaken to take full advantage of AngularJS directives in IE8 and IE7,
and those are described in the details in Chapter 12, Packaging and Deploying AngularJS
Web Applications, devoted to the real-life deployment scenarios.


Handling model transformations with filters


AngularJS expressions can get fairly complex and contain function invocations.
Those functions might serve different purposes but model transformations and
formatting are common needs. To cater for those common use-cases AngularJS
expressions support special formatting (transforming) functions called filters:


{{user.signedUp| date:'yyyy-MM-dd'}}

In this example the date filter is used to format user's sign-up date.


A filter is nothing more than a global, named function that is invoked in view using
the pipe (|) symbol with parameters separated by the colon (:) character. In fact we
could re-write our sample code like so (provided that the formatDate function is
defined on a scope):


{{formatDate(user.signedUp, 'yyyy-MM-dd')}}

Advantages of filters are two-fold: they don't require registration of functions on a
scope (so are readily available for each and every template), and usually offer more
convenient syntax as compared to regular function calls.


The simple example also shows that filters can be parameterized (or in other words,
arguments can be passed to a filter function): here we specify a date format as an
argument to the date filter.

Free download pdf