Post
Ask Question

Filters In Angular

Filters are used to change or modify the data. These can be clubbed in expression or directives using pipe (|) character.

A list of some common filters and their usage is given below.

Filter NameDescription
Uppercaseconverts a text to uppercase text.
Lowercaseconverts a text to lowercase text.
Currencyformats text in currency format.
Filterfilter the array to a subset of it based on certain conditions.
OrderbyOrders the array based on certain conditions.
DateFormat a date to a specified format.
JsonFormat an object to a JSON String.
NumberFormat number to a string.
LimitToLimits an array or string into a specified number of elements or characters.

1. Example of Uppercase and Lowercase filters.
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3.   
  4. <head>  
  5.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">  
  6.         </script>  
  7.         <title></title>  
  8.         <meta charset="utf-8" /> </head>  
  9.   
  10. <body>  
  11.     <div ng-controller="MyCtrl"> My Name is {{firstName|uppercase}} {{lastName|lowercase}} </div>  
  12.     <script>  
  13.         var app = angular.module("myApp", []);  
  14.         app.controller("MyCtrl", function($scope) {  
  15.             $scope.firstName = "Rohit",  
  16.                 $scope.lastName = "Singh"  
  17.         });  
  18.     </script>  
  19. </body>  
  20.   
  21. </html>  
Output

My Name is ROHIT singh.

2. Example of Currency filter.
  1. <input type="text" ng-model="salary" />  
  2. Salary entered by you is: {{salary | currency }}
Output

Salary entered by you is: $145.00.

3. Example of Custom Filter.
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3.   
  4. <head>  
  5.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">  
  6.         </script>  
  7.         <title></title>  
  8.         <meta charset="utf-8" /> </head>  
  9.   
  10. <body>  
  11.     <div ng-controller="MyCtrl">  
  12.         <ul>  
  13.             <li ng-repeat="name in names | filter:'y'"> {{name}} </li>  
  14.         </ul>  
  15.     </div>  
  16.     <script>  
  17.         var app = angular.module("myApp", []);  
  18.         app.controller("MyCtrl", function($scope) {  
  19.             $scope.names = ['Ankush', 'Vinay', 'Saurav', 'Sandeep', 'Gaurav', 'Sanjay', 'Akshay', ];  
  20.         });  
  21.     </script>  
  22. </body>  
  23.   
  24. </html>  
Output
  • Vinay
  • Sanjay
  • Akshay
The above code only shows the names of those students who have letter 'Y' in their name.