Using Filters

A great feature of AngularJS is the ability to implement filters. Filters are a type of provider that hooks into the expression parser and modifies the results of the expression for display in a view—for example to format time or currency values.

You implement filters inside expressions, using the following syntax:

{{ expression | filter}}

If you chain multiple filters together, they are executed in the order in which you specify them:

{{ expression | filter | filter }}

Some filters allow you to provide input in the form of function parameters. You add these parameters by using the following syntax:

Click here to view code image

{{ expression | filter:parameter1:parameter2 }}

Also you can add filters, which are providers, to controllers and services by using dependency injection. The filter provider name is the name of the filter plus Filter. For example, the currency filter provider is named currencyFilter. The filter provider acts as a function, with the expression as the first parameter and any additional parameters after that. The following code defines a controller that injects currencyFilter and uses it to format results. Notice that currencyFilter is added to the dependency injection for the controller and is called as a function:

Click here to view code image

controller('myController', ['$scope', 'currencyFilter',
                            function($scope, currencyFilter){
  $scope.getCurrencyValue = function(value){
    return currencyFilter(value, "$USD");
  };
}]);