Post
Ask Question

Filters in AngularJS

You can learn more in my previous blogs,

In this blog we will see,

  • How to filter data in AngularJS.
  • Inbuilt filters
  • Sort data filters

To apply a filter in AngularJS a pipe character ( | ) is used.

E.g.



Inbuilt filters in AngularJS

Filter Name Description
Lowercase Converts all characters to lowercase.
Uppercase Converts all characters to uppercase.
Number Includes coma separators in a number.
Date Converts date to a requested format (explained below).
Currency $ is a default currency. Custom currencies can be added.

Date filter

Format Result
yyyy 4 digit year e.g. 1998
yy 2 digit year e.g. 1998 becomes 98
MMMM January-December
MMM Jan-Dec
MM 01-12
M 1-12
dd 01-31
d 1-31

AngularJS filter example

  1. Following is the simple html code without adding any filter to display the data in table format.
    1. <!DOCTYPEhtml>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4. <head>  
    5.   
    6.     <script src="Scripts/angular.js">  
    7.     </script>  
    8.   
    9.     <script src="Scripts/JavaScript6to10.js">  
    10.     </script>  
    11.   
    12.     <link href="StyleSheet2.css" rel="stylesheet" />  
    13. </head>  
    14.   
    15. <body ng-app="myModule" style="font-family:Arial">  
    16.   
    17.     <div ng-controller="myController">  
    18.   
    19.         <br/>  
    20.         <br/>  
    21.         <table>  
    22.             <thead>  
    23.                 <tr>  
    24.                     <th>Name</th>  
    25.                     <th>Gender</th>  
    26.                     <th>DateOfBirth</th>  
    27.                     <th>Salary</th>  
    28.                     <th>Salary</th>  
    29.                 </tr>  
    30.             </thead>  
    31.             <tbody>  
    32.                 <trng-repeat="employee in employees">  
    33.                     <td>{{employee.Name}}</td>  
    34.                     <td>{{employee.gender}}</td>  
    35.                     <td>{{employee.dateOfBirth}}</td>  
    36.                     <td>{{employee.Salary}}</td>  
    37.                     <td>{{employee.Salary}}</td>  
    38.                     </tr>  
    39.             </tbody>  
    40.         </table>  
    41.   
    42.     </div>  
    43.     <hr/>  
    44.   
    45. </body>  
    46.   
    47. </html>  
  2. JavaScript Code,
    1. /// <reference path="angular.js" />  
    2. varmyApp = angular  
    3.     .module("myModule", [])  
    4.     .controller("myController", function($scope)  
    5.     {  
    6.         var employees = [  
    7.             {  
    8.                 Name: "John",  
    9.                 gender: "male",  
    10.                 Salary: 55000,  
    11.                 dateOfBirth: new Date("May 23, 1950")  
    12.             },  
    13.             {  
    14.                 Name: "Rekha",  
    15.                 gender: "female",  
    16.                 Salary: 45000,  
    17.                 dateOfBirth: new Date("May 23, 1951")  
    18.             },  
    19.             {  
    20.                 Name: "Mary",  
    21.                 gender: "female",  
    22.                 Salary: 35000,  
    23.                 dateOfBirth: new Date("May 23, 1952")  
    24.             },  
    25.             {  
    26.                 Name: "Smith",  
    27.                 gender: "male",  
    28.                 Salary: 25000,  
    29.                 dateOfBirth: new Date("May 23, 1953")  
    30.             },  
    31.         ];  
    32.         $scope.employees = employees;  
    33.     });  
  3. Following is the code for StyleSheet.

    Output



  4. Following is the code fo the html page after adding filters.

  5. Use the same JavaScript Code.

  6. Filters are added for Name (uppercase, date, number, currency)
    1. <!DOCTYPEhtml>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4. <head>  
    5.   
    6.     <script src="Scripts/angular.js">  
    7.     </script>  
    8.   
    9.     <script src="Scripts/JavaScript6to10.js">  
    10.     </script>  
    11.   
    12.     <linkhref="StyleSheet2.css" rel="stylesheet" />  
    13. </head>  
    14.   
    15. <body ng-app="myModule" style="font-family:Arial">  
    16.   
    17.     <div ng-controller="myController">  
    18.   
    19.         <br/>  
    20.         <br/>  
    21.         <table>  
    22.             <thead>  
    23.                 <tr>  
    24.                     <th>Name</th>  
    25.                     <th>Gender</th>  
    26.                     <th>DateOfBirth</th>  
    27.                     <th>Salary</th>  
    28.                     <th>Salary</th>  
    29.                 </tr>  
    30.             </thead>  
    31.             <tbody>  
    32.                 <trng-repeat="employee in employees">  
    33.                     <td>{{employee.Name|uppercase}}</td>  
    34.                     <td>{{employee.gender}}</td>  
    35.                     <td>{{employee.dateOfBirth|date:"dd/MM/yyyy"}}</td>  
    36.                     <td>{{employee.Salary|number:2}}</td>  
    37.                     <td>{{employee.Salary|currency:"£"}}</td>  
    38.                     </tr>  
    39.             </tbody>  
    40.         </table>  
    41.   
    42.     </div>  
    43.     <hr/>  
    44.   
    45.     <hr/>  
    46.     <br/>  
    47.   
    48. </body>  
    49.   
    50. </html>  
    Output with filters

    Name (uppercase) DateOfBirth(date)
    Salary (number) Salary (currency)



    Sort Data Filter

    In AngularJS there are filters which are used to sort the data in ascending or descending order.



    1. To sort in ascending order, set reverse to false.
    2. To sort in descending order, set reverse to true.
    3. You can also use + and - to sort in ascending and descending order respectively.

  7. Following is the html code. By selecting the column through the dropdown list OrderBy filter is executed.

  8. Use the Same Stylesheet.
    1. <!DOCTYPEhtml>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4. <head>  
    5.   
    6.     <script src="Scripts/angular.js">  
    7.     </script>  
    8.     <scriptsrc="Scripts/JavaScript6to10.js">  
    9.         </script>  
    10.   
    11.         <lin khref="StyleSheet2.css" rel="stylesheet" />  
    12. </head>  
    13.   
    14. <body ng-app="myModule" style="font-family:Arial">  
    15.   
    16.     <div ng-controller="myController">  
    17.         Sort By:  
    18.         <selectng-model="sortColumn">  
    19.             <option value="Salary">Salary</option>  
    20.             <option value="dateOfBirth">Date of Birth</option>  
    21.             <option value="gender">gender</option>  
    22.             </select>  
    23.             <br/>  
    24.             <br/>  
    25.             <table>  
    26.                 <thead>  
    27.                     <tr>  
    28.                         <th>Name</th>  
    29.                         <th>Gender</th>  
    30.                         <th>DateOfBirth</th>  
    31.                         <th>Salary</th>  
    32.                     </tr>  
    33.                 </thead>  
    34.                 <tbody>  
    35.                     <trng-repeat="employee in employees | orderBy:sortColumn">  
    36.                         <td>{{employee.firstName}}{{employee.lastName}}</td>  
    37.                         <td>{{employee.gender}}</td>  
    38.                         <td>{{employee.dateOfBirth|date:"dd/MM/yyyy"}}</td>  
    39.                         <td>{{employee.Salary}}</td>  
    40.                         </tr>  
    41.                 </tbody>  
    42.             </table>  
    43.   
    44.     </div>  
    45.     <hr/>  
    46.     <br/>  
    47.   
    48. </body>  
    49.   
    50. </html>  
  9. Following is the JavaScript code. sortColumn property is initialized to salary so that data will be sorted by Salary for the first time.
    1. /// <reference path="angular.js" />  
    2. varmyApp = angular  
    3.     .module("myModule", [])  
    4.     .controller("myController", function($scope)  
    5.     {  
    6.         var employees = [  
    7.             {  
    8.                 firstName: "abc",  
    9.                 lastName: "xyz",  
    10.                 gender: "female",  
    11.                 Salary: 55000,  
    12.                 dateOfBirth: new Date("May 23, 1950")  
    13.             },  
    14.             {  
    15.                 firstName: "def",  
    16.                 lastName: "uvw",  
    17.                 gender: "Male",  
    18.                 Salary: 45000,  
    19.                 dateOfBirth: new Date("May 23, 1951")  
    20.             },  
    21.             {  
    22.                 firstName: "ghi",  
    23.                 lastName: "rst",  
    24.                 gender: "Male",  
    25.                 Salary: 35000,  
    26.                 dateOfBirth: new Date("May 23, 1952")  
    27.             },  
    28.             {  
    29.                 firstName: "jkl",  
    30.                 lastName: "pqr",  
    31.                 gender: "female",  
    32.                 Salary: 25000,  
    33.                 dateOfBirth: new Date("May 23, 1953")  
    34.             },  
    35.         ];  
    36.         $scope.employees = employees;  
    37.         $scope.sortColumn = 'Salary';  
    38.     });  
    Output with Salary column. Try it with another column also,