Post
Ask Question

Angular From Basic To Expert - Day Five

Introduction

In the previous articles of AngularJS from basic to expert Day One, Day Two, Day Three and Day Four, we have learned what AngularJS is, and we have seen some basics of AngularJS and directives in Angular and seen the main concepts such as: module, model, controller, scope, data bindings, and used them in our AngularJS demo application.

You can check previous articles here,

In this article, we will learn filters in AngularJS. So, I will explore them one by one and also will continue with our Angular demo application which we have used in previous articles.

Filters in AngularJS

Filters are used to format data in Angular. Filters can be added with directives or expressions by using the pipe (|). We can format the data by using the filters just before displaying it to the user.

Syntax

  1. {{ filter_expression | filter }}  
  2. Or  
  3. {{ filter_expression | filter : expression }}  
  4. Or  
  5. {{ filter_expression | filter : expression : comparator : key}}  

For example:

Expression Price: {{12345}}

Without filter it displays: Price: 12345 on the view.

With filter Expression Price: {{12345 | currency}}

Without filter it displays: Price: $12345.00 on the view.

It will display the local currency by default; we can set the different currencies as per our need.

Price

{{ 12345 | currency : ‘€’ }}

Output

Price: €12345.00

Filters can be used with the expressions in the View, as explained above; when we use filters in the view template, filters only execute when their inputs are changed.

Filters can also be used in controllers, directives, and services by injecting the dependency with the name <filterName>Filter into the controller, directive or service.

Build in Filters in Agular JS

AngularJS provides many built-in filters to transform data.

NameDescription
uppercaseFormats text to convert it to upper case text.
lowercaseFormats text to convert it to lowercase text.
currencyFormats number in a currency format.
filterFilter the array to a subset of the array based on the provided criteria.
dateFormats a date to specified format.
orderbyOrders the array based on provided criteria.
numberFormats a number to a text string.
jsonFormats an object to the JSON string.

For more details about each built in filter, please check here.

In the below example, I have covered all the built in filters: (check comments within code) 

  1. <!DOCTYPE html>  
  2. <head>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">  
  4. </script>  
  5. <script>  
  6.      var angApp = angular.module("MyERPDemoApp", []);  
  7.            
  8.     //Creating controller with name UserController.  
  9.     angApp.controller('UserController', function($scope) {  
  10.     $scope.welcomenote="Welcome to Angular JS world";  
  11.     $scope.title="Angular JS filter example";  

  13.     $scope.PersonNames = [  
  14.         {name:'arvind singh baghel',DOB:new Date(),country:'India', fee: 100},  
  15.         {name:'tom cruis',DOB:new Date(),country:'united States',fee:null} ,   
  16.         {name:'denial crg',DOB:new Date(),country:'United kingdom',fee:null},  
  17.         {name:'ronaldo',DOB:new Date(),country:'brazil',fee:1000} ,           
  18.         ];  
  19.       
  20.     $scope.orderByThis = function(data) {  
  21.     $scope.customOrderBy = data;        
  22.     }     

  24.    });  
  25.   
  26. </script>  
  27. </head>  
  28. <body ng-app="MyERPDemoApp" ng-controller="UserController">  
  29.   
  30. <!-- uppercase filter -->  
  31. Uppercase Filter : <span ng-bind="welcomenote | uppercase">  </span></br>  
  32. <!-- lowercase filter -->  
  33. lowercase filter : <span> {{ title | lowercase}} </span></br>  
  34.   
  35. <p>Enter Name To Filter : <input type="text" ng-model="name"><p>  
  36. <table border="1" >  
  37. <tr > <td ng-click="orderByThis('name')">Name</td> <td ng-click="orderByThis('DOB')">DOB</td> <td ng-click="orderByThis('country')">Country</td> <td ng-click="orderByThis('fee')">Fee</td>  
  38. </tr>  
  39.        <!-- filter and orderBy filter-->  
  40.     <tr ng-repeat="person in PersonNames | filter:name | orderBy:customOrderBy">  
  41.          <!-- customer myNewFormat filter -->  
  42.         <td>{{person.name }}</td>  
  43.          <!-- date filter -->  
  44.          <td>{{person.DOB | date:'dd/MM/yyyy'}}</td>  
  45.         <td>{{person.country}}</td>  
  46.          <!-- currency filter -->  
  47.          <td>{{person.fee | currency}}</td>  
  48.     </tr>  
  49. </table>  
  50. </body>  
  51. </html>  

Angular also provides functionality to create custom filters. For custom filter, check here.

Run the above example and see the output.

 

Summary

In this article, we have covered filters and used all built-in filters in our demo application.

So, in the next article in Day 6, I will cover Validation in Angular.


Similar Articles