Beginning AngularJS

(WallPaper) #1
Chapter 4

Filters and Modules


When working with data that has been retrieved from a database, you will spend a lot of time working with raw
unformatted data. It’s not at all uncommon to come across dates that are formatted unusually, numbers that have far
too many digits after the decimal point, and people’s names that are in all uppercase letters. Keep in mind that data
is not always stored in the best format for our own applications, and its original purpose might have been to service
a totally different kind of application. When presenting data to end users, however, we need a way to deal with such
things. Angular JS filters are often a very good way to do just that.
In this chapter, we will look at AngularJS filters, both the built-in variety and custom filters. We will also look at
AngularJS modules, which are important in their own right and are a prerequisite for creating custom filters.


Introduction to Filters


AngularJS filters format the value of an expression for display to the end user. They don’t actually change the
underlying data, but they do change how it is displayed in the particular case in which the filter is applied.
This is much easier to understand with the help of an example. First, let’s start off with some sample data
(see Listing 4-1) to which we can apply some filters.


Listing 4-1. Raw Sample Data



Data like this would typically come back from a request to a web service or a database, but we only want some
sample data, so that we can learn about AngularJS filters without the additional distraction of data access code. This
fictitious data, captured in a JavaScript object we have named someData in Listing 4-1, represents some customer
details. We will use this data as the chapter progresses, starting now with a first look at the AngularJS filter syntax.

Free download pdf