Post
Ask Question

Introduction to AngularJS – Day 8

In the 8th day of AngularJS article series, we are going to learning next key players/concept of AngularJS, understanding the concept of Filters in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7

Filters

In this article we are going to manipulate data using AngularJS. The AngularJS framework has another useful component ‘filters’. Filters return a subset of item. It is a global function which is used in a view with the help of pipe (|) symbol and parameter separated by colon (:).

Filters are used in the view to format the data. For example, we are showing date on view and we want print date in the format ‘Dec 23, 2015’. It’s not necessary to register a filter in scope. Filters can also be parameterized and you can also use filters in controller. Filters are mostly used with the {{expressions}}.

Syntax:

  1. {  
  2.     {  
  3.         expression | filter  
  4.     }  
  5. }  
  6. Or {  
  7.     {  
  8.         expression | filter1 | filter2...  
  9.     }  
  10. }  
syntax
The framework already brings a set of ready to use filters or built in filters like. Now let’s see what the built in filters in AngularJS are. 
  1. Filter

    Have you tried filtering any list of data? This filter perform this task, search within an array and apply any filter criteria. The following example shows you how to search name in array of names.
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="Csharp">  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.     <bodyng-controller="Corner">  
    10.         <h2>Welcome to C# Corner</h2> Enter name to search :  
    11.         <inputtype="text" ng-model="searchName" />  
    12.         <h3>Array of Names</h3>  
    13.         <ulng-repeat="name in names | filter:searchName">  
    14.             <li>{{name}}</li>  
    15.             </ul>  
    16.             <scripttype="text/javascript">  
    17.                 var app = angular.module("Csharp", []); app.controller("Corner", function ($scope) { $scope.names = ['Sonali', 'Varsha', 'Sameer', 'Monika', 'Prasad']; });  
    18.             </script>  
    19.     </body>  
    20.   
    21. </html>  
    In the above code we created array of names in controller and accessing using the help of $scope object. We enter value in textbox and that searches in array of names using filter and we bind that entered text using ‘ng-model’ and pass that bind data to filter. Here's the image:

    code

    Finally our example is ready to run, after running it will show the following output:

    output

    When we start entering text in textbox you can see the following,

    output

    This filter or search provide the full text search means, for example above list we enter character only ‘p’ and result come with record ‘Prasad’ because ‘p’ is only present in ‘Prasad’. Next we enter character ‘s’. Here's the output:

    output

  2. orderBy

    This is used for sorting an array. With this orderBy filter, we can order any array based on a predicate expression.
    1. {  
    2.     {  
    3.         expression | orderBy: name  
    4.     }  
    5. }  
    The above code is syntax of using orderBy filter with an expression. The following is the list of names without orderBy filter . Here's the output:

    output

    After applying the ‘orderBy’ for array of names see the following output:

    output

    The following is the complete code of above example:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="Csharp">  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.     <bodyng-controller="Corner">  
    10.         <h2>Welcome to C# Corner</h2>  
    11.         <h3>Array of Names</h3>  
    12.         <ulng-repeat="name in names | orderBy:name">  
    13.             <li>{{name}}</li>  
    14.             </ul>  
    15.             <scripttype="text/javascript">  
    16.                 var app = angular.module("Csharp", []); app.controller("Corner", function ($scope) { $scope.names = ['Sonali', 'Varsha', 'Sameer', 'Monika', 'Prasad', 'Amol']; });  
    17.             </script>  
    18.      </body>  
    19. </html>  
    See how to use ‘orderBy’ filter for array of names:

    code

  3. Currency

    The currency filter is used to format a number based on a currency. The basic usage of this filter is without any parameter:
    1. {  
    2.     {  
    3.         10 | currency  
    4.     }  
    5. }  
    This is used to add the currency symbol to a given value when there is no currency symbol, for example:
    1. {  
    2.     {  
    3.         10 | currency  
    4.     }  
    5. } {  
    6.     {  
    7.         100 | currency: “Rs.”  
    8.     }  
    9. }  
    The following example shows how to use ‘currency’ filter and with a specific locale currency:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app>  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <h2>Welcome to C# Corner</h2>  
    12.         <h3>Currency Filter</h3>  
    13.         <!-- specific locale symbol $ -->  
    14.         <h2>{{100|currency}}</h2>  
    15.         <!-- specific locale symbol India 'Rs.' -->  
    16.         <h2>{{100|currency:"Rs."}}</h2>  
    17.     </body>  
    18.   
    19.     </html>  
    code

    The following is the output of above code of ‘currency’ filter with default and specific locale currency output:

    output

  4. Lowercase and uppercase

    This filter is used to transform the text to uppercase or lowercase. The following example shows how to use ‘lowercase’ and ‘uppercase’ filters:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app>  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <h2>Welcome to C# Corner</h2>  
    12.         <h3>lowercase and uppercase Filters</h3>  
    13.         <!-- lowercase filter -->  
    14.         <h3>Jeetendra{{'GUND'|lowercase}}</h3>  
    15.         <!-- uppercase filter -->  
    16.         <h3>{{'jeetendra'|uppercase}}Gund</h3>  
    17.     </body>  
    18.   
    19.     </html>  
    The following is the output of above HTML code:

    code

    Great, we learned what are filters in AngularJS and various built in filters in AngularJS with implementing example successfully.

    Summary

    I hope that beginners as well as students understood the concept of Filters in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.

    Thanks for reading. Learn it! Share it.


Similar Articles