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">
  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>
  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>
  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">
  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>
  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>
  24. </html>
Output
  • Vinay
  • Sanjay
  • Akshay
The above code only shows the names of those students who have letter 'Y' in their name.