By now, we know how to transfer data from a backend or user into an HTML page. This section will focus on how to show and manipulate data using AngularJS. The AngularJS framework has another useful component: filters. Filters return a subset of the item. In AngularJS, a filter is a global function that can be implemented in the view using a pipe symbol (|) and the parameter separated by a colon (:). AngularJS filters are used to format data in the view, for example when we want to display a number up to two decimals even if the user enters the value with more than two decimals. The advantage of using the AngularJS filter is that you do not need to register a function on the scope. Filters are available for each and every DOM template, and a filter can also be parameterized. The following table shows a list of significant built-in filters in AngularJS:

The following code example shows how to use the AngularJS filter for searching an array:

var app = angular.module('myApp', []);

app.controller("ctrlFilterExample", function ($scope) {
    $scope.cars = [
      { name: "Honda", model: 2014 },
      { name: "Toyota", model: 2015 },
      { name: "Mercedes", model: 2013 },
      { name: "Ford", model: 2016 },
      { name: "BMW", model: 2014 },
      { name: "Porsche", model: 2015 }
    ];
});

We can render the HTML element as follows:

<div ng-app="myApp" ng-controller="ctrlFilterExample">

<input ng-model="carName" type="text" placeholder="Filter by" autofocus><br />

<ul ng-repeat="car in cars | filter:carName | orderBy: 'name' ">

<li>{{car.name}}</li>

</ul>
</div>

We can use multiple filters at a time. In the AngularJS framework, chaining filters is a good way of implementing more than one filter. AngularJS filters can be applied to strings, objects, or function parameters. In the preceding example, we first applied a filter on the string parameter, but gave an array of the $scope.cars object. We used the ng-repeat directive to display the array and apply two filters using the pipe symbol (|). With the first filter, we searched inside the $scope.car array when the user typed inside the textbox. Then, we used the ng-model directive in the <input> element and assigned the variable name as carName. The model variable was then passed to the filter:carName filter. Second, we filtered the array by name using the orderBy filter, orderBy: 'name'.

The custom filter

The AngularJS framework allows us to create custom filters. In the following code example, we create a filter that will show a check mark if the car model year is the current year, otherwise the filter will show a cross:

var app = angular.module('myApp', []); 

app.controller("ctrlFilterExample", function ($scope) { 
$scope.cars = [ 
{ name: "Honda", model: 2014 }, 
{ name: "Toyota", model: 2015 }, 
{ name: "Mercedes", model: 2013 }, 
{ name: "Ford", model: 2016 }, 
{ name: "BMW", model: 2014 }, 
{ name: "Porsche", model: 2015 } 
]; 
}); 
app.filter("markCurrentYear", function () { 
return function (input) { 
var currentYear = new Date().getFullYear(); 

if (input == currentYear) { 
return input+' ' + 'u2713'; 
}
else 
{ 
return input +' ' + 'u2718'; 
} 
}; 
}); 

We can render the HTML elements as follows:

<div ng-app="myApp" ng-controller="ctrlFilterExample">

<ul ng-repeat="car in cars | orderBy: 'name'">
<li>{{car.name}} - {{car.model|markCurrentYear}}</li>
</ul>

</div>

The output of the preceding code is as follows:

As you can see in HTML in the preceding code, we called this the {{car.model | markCurrentYear}} filter.