Filters

Description

We can use AngularJS filter to format the data.

AngularJS has several built-in filters and provides an easy way to create our filters.

We call filters in HTML with the | (pipe) character inside {{ }}.

To capitalize our string we can use buildin filter.

We can also use filters with $filter service. For instance, to use the lowercase JavaScript filter:

app.controller('MyController',  ['$scope',  '$filter',
     function($scope, $filter) {
         $scope.name =  $filter('lowercase')('Angular');
}]);

Filter argument

To pass an argument to a filter in HTML, we pass it with a colon after the filter name.

To pass in multiple arguments, we can append a colon after each argument.

For example, the number filter allows us to limit the number of decimal places. To pass the argument 2, we'll append :2 to the number filter:

<!--  Displays:  123.46 -->
{{  123.456789 | number:2 }}

Note

We can use multiple filters at the same time by using two or more pipes.