AngularJS: Up and Running

Chapter 8. Working with Filters

In the previous few chapters, we have explored two of the four cornerstones of AngularJS applications: controllers and services. With controllers, we looked at how to get the data we want out into the UI, and how to handle simple styling and presentation logic. We used services to create common business logic, and a layer that would be common across all our controllers.

In this chapter, we work with AngularJS filters. By the end of the chapter, we will get a sense of how and when to use AngularJS filters, as well as how to create a very simple but useful custom AngularJS filter. We end the chapter with a section on best practices and how to get the most out of AngularJS filters.

What Are AngularJS Filters?

AngularJS filters are used to process data and format values to present to the user. They are applied on expressions in our HTML, or directly on data in our controllers and services. Mostly, they are used as that final level of formatting to convert data from the way it is stored to a user-readable format. Some common examples where we would use filters are to take a timestamp and make it human-readable, or to add the currency symbol to a number.

Another feature of AngularJS filters, when they are used in the view, is that they give us dynamic, on-the-fly data that doesn’t need to be stored. When we apply filters in the HTML, the filtered values are shown to the user but do not modify the original value on which they are applied.

Let’s look at some common ...