AngularJS Built-in+Custom Filters Dissected

This post describes AngularJS Filters with Examples. Both AngularJS Custom and built-in filters are explained in great details with help of live examples. We will learn using common AngularJS built-in filters, using them in view templates as well as in javaScript. We will also learn how to create a custom filter for specific cases.


AngularJS Filters are mainly used to transform the data from the way it is stored to a human-readable format. Filters DO NOT MODIFY the data they applied upon, but provides on the fly conversion of that data into required format. Common usage of filters could be : show text in lower/upper case, display a timestamp in user specified format, add a currency symbol to a number etc.

AngularJS built-in Filters.

Following are the commonly used built-in filters.

Filter Description
lowercase lowercase filter
uppercase uppercase filter
currency currency filter
number number filter
date date filter
json json filter
limitTo limitTo filter
orderBy orderBy filter
filter filter filter

Filters can be applied on View Templates and on data in Controllers/Service/Directives.

1) Filters On View Templates

On view level, filters are applied on expressions separated with PIPE.

{{ expression | filter }}

Filters can be chained:

{{ expression | filter1 | filter2 | ... }}

Filters can accept arguments

{{ expression | filter:argument1:argument2:.. }}

Full Example with Live Demo

Let’s see an example using AngularJS built-in filters.

<html>
	<head>  
		<title>AngularJS Filter Example</title>  
	</head>
	<body ng-app="myApp" class="ng-cloak">
		<div ng-controller="AppController as ctrl">
			<div>
				Name in UPPERCASES: {{ctrl.name | uppercase}}
			</div>
			<div>
				Name in lowercases: {{ctrl.name | lowercase}}
			</div>
			<div>
				First 3 letters of Name in lowercases: {{ctrl.name | lowercase | limitTo:3}}
			</div>
			<div>
				Quantity as a number: {{ctrl.quantity | number}}
			</div>
			<div>
				Quantity as a number with 3 decimals: {{ctrl.quantity | number:3}}
			</div>
			<div>
				Price with a currency: {{ctrl.price | currency}}
			</div>
			<div>
				Price with a Specific Currency : {{ctrl.price | currency:'EUR'}}
			</div>
			<div>
				JSON object: {{ctrl.jsonObj | json}}
			</div>
			<div>
				Date with default format (timestamp): {{ctrl.startAt}}
			</div>
			<div>
				Date with default 'date' format: {{ctrl.startAt | date}}
			</div>
			<div>
				Date with  specific built-in format: {{ctrl.startAt | date:'short'}}
			</div>
			<div>
				Date with  custom format: {{ctrl.startAt | date:"MM/dd/yyyy 'at' h:mma"}}
			</div>
		</div>	  
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
		</script>
		<script type="text/javascript">
			angular.module('myApp', [])
			.controller('AppController', [function() {
				var self = this;
				self.name = "Shaun Pollock"
				self.price = 1000;
				self.quantity = 5;
				self.jsonObj = {strng: 'bla', num: 123};
				self.startAt = new Date().getTime();
			}]);
		</script>
	</body>
</html>

Output:

Above example uses AngularJS built-in filters, namely lowercase, uppercase, date, number, currency, limitTo & json. What is important to understand that while applying filter like : {{ctrl.name | uppercase}} , The real value in ctrl.name does not change at all. Instead, data is dynamically formatted to uppercase on view only which is what user will see on screen.

Filters on Arrays:

To work with Arrays, AngularJS provides following filters: limitTo, orderBy & filter.

Let’s see them with help of examples.

a) limitTo Example

The limitTo filter takes either a string or an array of elements and returns a subset from the beginning or the end of the array (if the argument passed is -ve). Syntax is as follows:

{{ expression | limitTo : limit : begin}}

where limit is the number of elements. If limit is negative, selection will be done from the end of string/array. begin is the position/index to start with, it defaults to 0.

<html>
    <head>  
        <title>AngularJS Filter Example</title>  
    </head>
    <body ng-app="myApp" class="ng-cloak">
        <div ng-controller="AppController as ctrl">
            <div>
                Name : {{ctrl.name | limitTo:3}}
            </div>
            <div>
                Name : {{ctrl.name | limitTo:3:2}}
            </div>
            <div>
                Name : {{ctrl.name | limitTo:-2}}
            </div>
            <div>
                Items: {{ctrl.items | limitTo:5}}
            </div>
            <div>
                Items: {{ctrl.items | limitTo:5:2}}
            </div>
            <div>
                Items From Reverse: {{ctrl.items | limitTo:-2}}
            </div>

        </div>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
        </script>
        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('AppController', [function() {
                var self = this;
                self.name = "Shaun Pollock"
                self.items = [10,20,30,40,50,60,70,80,90,100];
            }]);
        </script>
    </body>
</html>

Output:

b) orderBy Example

orderBy filter takes an array and order it by one ore more predicate expressions. Syntax is as follows:

{{ expression | orderBy : predicate_expression : reverse}}

Predicate_expression is used to order array elements. Option Boolean argument (reverse) can be used to sort the array in reverse order. The simplest form of a predicate expression is a string, which is the name of the field (the key of each object) to order the array by, with an optional + or – sign before the field name to decide whether to sort ascending or descending by the field. The predicate expression can also be passed a function, in which case the return value of the function will be used (with simple <, >, = comparisons) to decide the order. Finally, the predicate expression can be an array, in which case each element of the array is either a string or a function. AngularJS will then sort it by the first element of the array, and keep cascading to the next element if it is equal.

<html>
    <head>  
        <title>AngularJS Filter Example</title>  
    </head>
    <body ng-app="myApp" class="ng-cloak">
        <div ng-controller="AppController as ctrl">
            <table class="players">
            <tr>
              <th>Name</th>
              <th>Matches</th>
              <th>Averagee</th>
            </tr>
            <tr ng-repeat="player in ctrl.players | orderBy:'-avg'">
              <td>{{player.name}}</td>
              <td>{{player.matches}}</td>
              <td>{{player.avg}}</td>
            </tr>
          </table>
        </div>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
        </script>
        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('AppController', [function() {
                var self = this;
                self.players=
                 [{name:'Shaun Pollock',  matches:'400', avg:60},
                  {name:'Lance Klusner',  matches:'210', avg:87},
                  {name:'Alan Donald',    matches:'450', avg:21},
                  {name:'Gary Kirsten',   matches:'370', avg:66},
                  {name:'Harschel Gibbs', matches:'420', avg:77}];
            }]);
        </script>
    </body>
</html>

Output:

c) filter Example

‘filter’ filter selects a subset of items from array based on predicates or function, and returns it as a new array. Syntax is as follows:

{{ filter_expression | filter : expression : comparator}}

Expression can be string, object or function.

  • String expression : AngularJS will look for the string in the keys of each object of the array, and if it is found, the element is included. The predicate can be negated by prefixing the string with !.
  • Object expression : AngularJS takes each key of the object and makes sure that its value is present in the corresponding key of each object of the array.For example, an object expression like {size:”M”} would check each item of the array and ensure that the objects have a key called size and that they contain the letter “M” (not necessarily an exact match).
  • function expression : The most flexible and powerful of the options, the filter can take a function to implement arbitrary and custom filters. The function gets called with each item of the array, and uses the return value of the function to decide whether to include the item in the end result. Any item that returns a false gets dropped from the result.

Comparator is used in determining if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match.It can be one of true/false/function(expected,actual).

<html>
    <head>  
        <title>AngularJS Filter Example</title>  
    </head>
    <body ng-app="myApp" class="ng-cloak">
        <div ng-controller="AppController as ctrl">
			<label>
				<input type="radio" ng-model="ctrl.filterOption" value="string">String</label>
				<input type="radio" ng-model="ctrl.filterOption" value="object">Object
				<input type="radio" ng-model="ctrl.filterOption" value="function">Function
			</label><br/>
			<div ng-if="ctrl.filterOption==='string'">
				<label>Search: <input ng-model="ctrl.searchText"></label>
				<label>Exact Match <input type="checkbox" ng-model="ctrl.exactMatch"></label><br>
				<table id="searchTextResults">
					<tr>
						<th>Name</th><th>Sport</th><th>Age</th><th>Retired</th>
					</tr>
					<tr ng-repeat="player in ctrl.players | filter:ctrl.searchText:ctrl.exactMatch">
						<td>{{player.name}}</td>
						<td>{{player.sport}}</td>
						<td>{{player.age}}</td>
						<td>{{player.retired}}</td>
					</tr>
				</table>
			</div>
			<div ng-if="ctrl.filterOption==='object'">
				<table id="searchTextResults">
					<tr>
						<th>Name</th><th>Sport</th><th>Age</th><th>Retired</th>
					</tr>
					<tr ng-repeat="player in ctrl.players | filter:ctrl.obj">
						<td>{{player.name}}</td>
						<td>{{player.sport}}</td>
						<td>{{player.age}}</td>
						<td>{{player.retired}}</td>
					</tr>
				</table>
			</div>
			<div ng-if="ctrl.filterOption==='function'">
				<table id="searchTextResults">
					<tr>
						<th>Name</th><th>Sport</th><th>Age</th><th>Retired</th>
					</tr>
					<tr ng-repeat="player in ctrl.players | filter:ctrl.fun">
						<td>{{player.name}}</td>
						<td>{{player.sport}}</td>
						<td>{{player.age}}</td>
						<td>{{player.retired}}</td>
					</tr>
				</table>
			</div>
        </div>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
        </script>
        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('AppController', [function() {
                var self = this;
				self.players = [
					{name: 'Shaun Pollock'  , sport: 'cricket'   , age: 45, retired: true},
					{name: 'Roger Federer'  , sport: 'tennis'    , age: 34, retired: false},
					{name: 'Usain Bolt'     , sport: 'sprint'    , age: 32, retired: false},
					{name: 'Maria Sharapova', sport: 'tennis'    , age: 29, retired: false},
					{name: 'Jonty Rhodes'   , sport: 'cricket'   , age: 37, retired: true},
					{name: 'Andre Agasi'    , sport: 'tennis'    , age: 42, retired: true},
					{name: 'The Undertaker' , sport: 'wrestling' , age: 49, retired: false},
					{name: 'Goldberg'       , sport: 'wrestling' , age: 47, retired: true},
					{name: 'Schumacker'		, sport: 'formula1'  , age: 45, retired: true},
					{name: 'Justin Henin'   , sport: 'tennis'    , age: 41, retired: true}
				];
				self.filterOption='string';
				self.searchText='';
				self.exactMatch = false;
				self.obj={sport: 'tennis', retired:false};
				self.fun = function(player) {
					return player.sport === 'tennis' && player.retired === true;
				}
            }]);
        </script>
    </body>
</html>

Output:

2) Filters On Data in Controllers/Services/Directives

Any filter (built-in or custom) can be injected into any service, controller or directive by adding the word “Filter” at the end of the name of the filter, and injecting it. For example, we can use currency filter in our controller as follows:

angular.module('myApp', [])
.controller('AppController', ['currencyFilter', 
function(currencyFilter) {
      var self=this;
      self.amount=1000;
      var currencyInEur = currencyFilter(self.amount,'EUR');
}]);

First parameter to the filter function is the input to work upon. Rest of the arguments are same as in View Templates.

Let’s see few examples to understand them in detail.

a) orderBy filter example

Below is the same orderBy filter example [we developed earlier] with Controller this time.

<html>
    <head>  
        <title>AngularJS Filter Example</title>  
    </head>
    <body ng-app="myApp" class="ng-cloak">
        <div ng-controller="AppController as ctrl">
            <table class="players">
            <tr>
              <th>Name</th>
              <th>Matches</th>
              <th>Averagee</th>
            </tr>
            <tr ng-repeat="player in ctrl.sortedPlayers">
              <td>{{player.name}}</td>
              <td>{{player.matches}}</td>
              <td>{{player.avg}}</td>
            </tr>
          </table>
        </div>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
        </script>
        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('AppController', ['orderByFilter',function(orderByFilter) {
                var self = this;
                self.players=
                 [{name:'Shaun Pollock',  matches:'400', avg:60},
                  {name:'Lance Klusner',  matches:'210', avg:87},
                  {name:'Alan Donald',    matches:'450', avg:21},
                  {name:'Gary Kirsten',   matches:'370', avg:66},
                  {name:'Harschel Gibbs', matches:'420', avg:77}];
                self.sortedPlayers = orderByFilter(self.players, '-avg');
            }]);
        </script>
    </body>
</html>

Output:

b) ‘filter’ filter example

<html>
    <head>  
        <title>AngularJS Filter Example</title>  
    </head>
    <body ng-app="myApp" class="ng-cloak">
        <div ng-controller="AppController as ctrl">
			<h4>Filter With String</h4>
			<div>
				<table>
					<tr>
						<th>Name</th><th>Sport</th><th>Age</th><th>Retired</th>
					</tr>
					<tr ng-repeat="player in ctrl.filterdPlayersWithString">
						<td>{{player.name}}</td>
						<td>{{player.sport}}</td>
						<td>{{player.age}}</td>
						<td>{{player.retired}}</td>
					</tr>
				</table>
			</div>
			<h4>Filter With Object</h4>
			<div>
				<table>
					<tr>
						<th>Name</th><th>Sport</th><th>Age</th><th>Retired</th>
					</tr>
					<tr ng-repeat="player in ctrl.filterdPlayersWithObject">
						<td>{{player.name}}</td>
						<td>{{player.sport}}</td>
						<td>{{player.age}}</td>
						<td>{{player.retired}}</td>
					</tr>
				</table>
			</div>
			<h4>Filter With Function</h4>
			<div>
				<table>
					<tr>
						<th>Name</th><th>Sport</th><th>Age</th><th>Retired</th>
					</tr>
					<tr ng-repeat="player in ctrl.filterdPlayersWithFunction">
						<td>{{player.name}}</td>
						<td>{{player.sport}}</td>
						<td>{{player.age}}</td>
						<td>{{player.retired}}</td>
					</tr>
				</table>
			</div>
        </div>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
        </script>
        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('AppController', ['filterFilter', function(filterFilter) {
                var self = this;
				self.players = [
					{name: 'Shaun Pollock'  , sport: 'cricket'   , age: 45, retired: true},
					{name: 'Roger Federer'  , sport: 'tennis'    , age: 34, retired: false},
					{name: 'Usain Bolt'     , sport: 'sprint'    , age: 32, retired: false},
					{name: 'Maria Sharapova', sport: 'tennis'    , age: 29, retired: false},
					{name: 'Jonty Rhodes'   , sport: 'cricket'   , age: 37, retired: true},
					{name: 'Andre Agasi'    , sport: 'tennis'    , age: 42, retired: true},
					{name: 'The Undertaker' , sport: 'wrestling' , age: 49, retired: false},
					{name: 'Goldberg'       , sport: 'wrestling' , age: 47, retired: true},
					{name: 'Schumacker'		, sport: 'formula1'  , age: 45, retired: true},
					{name: 'Justin Henin'   , sport: 'tennis'    , age: 41, retired: true}
				];
				self.searchText='cri';
				self.exactMatch = false;
				self.obj={sport: 'tennis', retired:false};
				self.fun = function(player) {
					return player.sport === 'tennis' && player.retired === true;
				}
				self.filterdPlayersWithString = filterFilter(self.players,self.searchText,self.exactMatch);
				self.filterdPlayersWithObject = filterFilter(self.players,self.obj);
				self.filterdPlayersWithFunction = filterFilter(self.players,self.fun);
				
            }]);
        </script>
    </body>
</html>

Output:

Custom Filters

Built-in filters are great but not enough. In those specific situations where you want to implement your own filter, you can create custom filters.

General syntax for writing custom filter is shown below:

app.filter('mycustomfilter', [function () {
  return function (item) {
    //do something with item
    return something;
  };
}]);

Module’s filter function is used to create custom filters.It follows the same syntax as Controllers or services. First parameter is the name of filter which we can use in HTML. Second parameter is an array, where in you can specify any dependencies your filter might wants to be injected in (same as for controllers e.g.). Take special note of the return statement : it returns a function which gets invoked each time angularJS calls the filter.

Then in HTML you can use this filter like

Do something special with new filter: {{ctrl.somevar | mycustomfilter}}

You can additionally pass arguments

app.filter('mycustomfilter', [function () {
  return function (item, arg1, arg2, arg3) {
    //do something with item
    return something;
  };
}]);
Do something special with new filter: {{ctrl.somevar | mycustomfilter:arg1:arg2:arg2}}

Let’s write a custom filter which (like built-in uppercase filter) shows an input string in UPPERCASES.

<html>
    <head>  
        <title>AngularJS Filter Example</title>  
    </head>
    <body ng-app="myApp" class="ng-cloak">
        <div ng-controller="AppController as ctrl">
			<h4>Custom Filter Example</h4>
			Initial value : {{ctrl.samplestr}}
			<br/>
			Filtered Value in UpperCases : {{ctrl.samplestr | convertToUppercase}}
        </div>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
        </script>
        <script type="text/javascript">
            angular.module('myApp', [])
            .controller('AppController', [function() {
                var self = this;
				self.samplestr = "webSystique";
				}]
			).filter('convertToUppercase', [function () {
				return function (str) {
					return str.toUpperCase();
				};
			}]);
        </script>
    </body>
</html>

Output:

If you like tutorials on this site, why not take a step further and connect me on Facebook , Google Plus & Twitter as well? I would love to hear your thoughts on these articles, it will help me improve further our learning process.

If you appreciate the effort I have put in this learning site, help me improve the visibility of this site towards global audience by sharing and linking this site from within and beyond your network. You & your friends can always link my site from your site on www.websystique.com, and share the learning.

After all, we are here to learn together, aren’t we?