Angular — Master filters

Cinemagraph — Meet Me at the bar

Filters are very handy to format data displayed to the user. Common use cases are currency, dates and numbers. Other less common filters are: uppercase, lowercase, limitTo, orderBy and json.

In this post, you will learn how to:

  • Inject a filter
  • Default Angular filters
  • Basic filter usage
  • Passing parameters to a filter
  • Chaining filters
  • Filter composition

You will find a sample code at the end. Let’s get started!

Inject a filter

Common filters

Basic filter usage

Passing parameters to a filter

Chaining filters

Expression filter composition (within ng-repeat)

You can compose multiple filter expressions by using parenthesis like

( object | filter : param ) + ( object | filter : param )

An example appending $index to a previous filter

Demo code: link


Angular is really test-friendly, one of its best features is quick prototyping. Learn how you can apply prototyping in this post