AngularJS Filters

In the previous chapter we have learnt about the AngularJS controllers and in this chapter we will be learning about AngularJS filters.

AngularJS Filters

  1. In order to transform the data used in the application we need to use filters.
  2. AngularJS filters are used to change or modify the data used in application.
  3. AngularJS filters are represented using the pipe character.
  4. AngularJS filters can be used along with the AngularJS expressions.

Below are some of the commonly used filters -

S.No. Name Description
1 uppercase Used to convert a text to upper case
2 lowercase Used to convert a text to lower case
3 currency Used to format text in a currency format.
4 filter Used to filter the array to a subset based on provided criteria.
5 orderby Used to order an array based on provided criteria.

Examples of AngularJS filters

AngularJS filter #1 : uppercase

Filter is used to transform the textual content to uppercase format.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Pritesh';lname='Taral'">
   <p>First name is {{ fname | uppercase }}</p>
   <p>Last name is  {{ lname | uppercase }}</p>
</div>
</body>
</html>

Output :

First name is PRITESH
Last name is TARAL

AngularJS filter #2 : lowercase

Filter is used to transform the textual content to lowercase format.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Pritesh';lname='Taral'">
   <p>First name is {{ fname | lowercase }}</p>
   <p>Last name is  {{ lname | lowercase }}</p>
</div>
</body>
</html>

Output :

First name is pritesh
Last name is taral

AngularJS filter #3 : currency

Filter is used to transform the numeric values into currency format.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="priceController">
<p>Quantity   : <input type="number" ng-model="qty"></p>
<p>Unit Price : <input type="number" ng-model="price"></p>
<p>Total = {{ (qty * price) | currency }}</p>
</div>
<script>
function priceController($scope) {
    $scope.qty   = 5;
    $scope.price = 10;
}
</script>
</body>
</html>

Output :
currency angularjs filter

AngularJS filter #4 : orderby

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<ul>
   <li ng-repeat="student in students | orderBy:'marks'">
      {{ student.name + ' Marks : ' + student.marks }}
   </li>
</ul>
</div>
<script>
function studentController($scope) {
    $scope.students = [
         {name:'Suraj',marks:89},
         {name:'Pooja',marks:81},
         {name:'Rajes',marks:69},
         {name:'Omkar',marks:61},
         {name:'Raman',marks:93},
         {name:'Amana',marks:80},
         {name:'Parth',marks:85}
      ]
}
</script>
</body>
</html>

Output :
AngularJS filter orderby

In this example we have created an array of the students like -

$scope.students = [
   {name:'Suraj',marks:89},
   {name:'Pooja',marks:81},
   {name:'Rajes',marks:69},
   {name:'Omkar',marks:61},
   {name:'Raman',marks:93},
   {name:'Amana',marks:80},
   {name:'Parth',marks:85}
]

In order to sort all these array elements we can use orderby filter.

<li ng-repeat="student in students | orderBy:'marks'">
    {{ student.name + ' Marks : ' + student.marks }}
</li>

AngularJS filter #5 : filter

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<p><input type="text" ng-model="sname"></p>
<p ng-repeat="student in students | filter: sname | orderBy:'marks'">
  {{ student.name + ' Marks : ' + student.marks }}
</p>
</div>
<script>
function studentController($scope) {
    $scope.students = [
         {name:'Suraj',marks:89},
         {name:'Pooja',marks:81},
         {name:'Rajes',marks:69},
         {name:'Omkar',marks:61},
         {name:'Raman',marks:93},
         {name:'Amana',marks:80},
         {name:'Parth',marks:85}
      ]
}
</script>
</body>
</html>

Output :
AngularJS Filter filters