Getting Started with Angular Part 2. Filters.

The next topic to discuss in Angular is Filters.  Filters typically are used to format expressions in bindings in your template.  Filters can transform data to a new type, be chained, and take in optional arguments.

Building on the previous example, I added a new field to our models called Orbit.  This represents the orbit of the object in days.  In our view I added a new line to display the orbit on the page just like the other read-only properties before:

<div>{{object.Orbit}}</div>

Simple enough.  What if I wanted to then display the orbit value with some text next to it?  There are a lot of different ways to do it such as adding text directly to the view, css tricks, etc..  I am going to use a filter to display some text with the value above.  The biggest benefit of doing it here instead of in the view is reusability & maintainability.  If I decided to just update the text, but then ended up needing displaying this object in a different area and want to use the same text to display with it then I would then have to copy over the text to both areas.  What if I then decided to change the wording of the text?  Then I would have to update it in N places, where N is the number of places where the text is being displayed.  If I just use a filter, then I can reference the filter in each place and change the display in 1 place. 

The filter I am going to add will just display “Days to orbit” next to the value.  To do this we need to add a filter to our module.  Here is what the code looks like:

angular.module('solarSystemApp.filter', []).filter('displayInDays',
    function (){
        return function(value){
            if (value){
                return value + " Days to orbit."
            }
            else
            {
                return "This has no orbit";
            }
        }
    });

Here is how the filter works.  The first parameter to the filter call is what we are defining our filter to be.  Ours will be called “displayInDays”, and the second parameter is a function that returns the function that will be called on your binding.  The function above takes in a value, and either appends “ Days to orbit.” after it or “This has no orbit” if there isn’t any value.  Now to update the view to use this:

{{object.Orbit | displayInDays}}

Done!

Let’s show some other features I talked about above.  We are going to create a new filter that will take the orbit and divide it by 365 to display it in years.  We will then chain that filter with one of the out of the box ones to limit the # of decimal places displayed on the form.  Here is our new  filter:

.filter('displayInYears', function(){
        return function(value){
            if (value && !isNaN(value)){
                return (value / 365.0);
            }
            else{
            }
        }
    }

Here is the updated view:

<div>{{object.Orbit | displayInDays}}.  That's {{object.Orbit | displayInYears | number:4}} years!!!1</div>

In the view you can see we are passing the orbit value to the displayInYears filter, and then chaining that to the out of the box ‘number’ filter and passing a parameter of (4) to the number filter. 

Here is a list of filters that come out of the box with angular.  Some of them are self-explanatory,

1.       date -> formats a date.  Takes in number, string, or date
2.       number -> formats a number.
3.       currency -> formats into currency.
4.       json -> calls JSON.stringify on object
5.       filter -> filters values in an array
6.       limitTo -> creates a copy of an array up to a limit based on a parameter.
7.       lowercase  -> makes string lowercase
8.       uppercase -> makes string uppercase
9.       orderBy -> sorts an array

Here is a link to the fiddle with the updated filters.