Filters in AngularJS

Filter is also a component in the AngularJS framework. It is used for post-processing the expressions or values. Similar as services, you can define your own filters and you can also use the built-in filters.

Defining a filter

app.filter('uppercase', function(){
  return function(input) {
    input = input || '';
    var out = '';
    out = input.toUpperCase();
    return out;
  };
});

Using a filter in the controller

app.controller('MainCtrl', ['$scope', 'uppercase', function($scope, uppercase) {
  $scope.greeting = 'hello';
  $scope.uppcaseGreeting = uppercase($scope.greeting);
}]);

Using a filter in the view

<div ng-controller="MainCtrl">
  <input ng-model="greeting" type="text">
  <p></p>
</div>