Ad

Saturday, January 30, 2016

Codecademy AngularJS tutorial walk through 4 Filters currency filters




In this exercise, Codecademy asks the student to add a filter to {{product.price}}.

AngularJS filters look like a vertical line which is a special symbol called a pipe and it surely looks like one! After the pipe, we specify currency so that every time AngularJS sees the product.price property say 19, it will automatically add a dollar sign to it making it $19.

This feature is very handy displaying currencies. AngularJS has other cool filters too. 

The concept of filters is like Instagram filters: the underlining data or photo is the same, the filters change the look of the underlining data or photo making things look different. For example, the underlining date is Feb 22, 2015. Using a date filter can display it as 2015/2/22 a format used in Asian countries or it can display it as 2/22/2015 for the US. It's nice that we don't have to change the data or write a function to change the date for each country. We can use the readily available date filter.


Solution 

{{product.price | currency }}

Angular sees the {{}} and be like oh I'd better look at this. These are for me. Then it reads data from the corresponding controller, find a property called product in the $scope of the controller, then find the price property of product. Then it filters the data and turn it into currency format by adding a dollar sign in front of the price.

2 comments:

Machine Learning with Emoji for Fun?

Here's an interesting idea. Explain Machine Learning with Emojis! It's not trivial to convey complex ideas with symbols but it is a ...