Filters in AngularJS Tutorial with example


        Filters in AngularJS formats the value of expression for display to the user. There are many number of filters in AngularJS but the following are commonly used

  • UpperCase - Converts text to uppercase
  • LowerCase - Converts text to lowercase
  • Currency - Formats a number as currency
  • filter - This can only be used on Arrays, that filters Array of data to subset based on filter criteria
  • Orderby -  Orders data in array based on the criteria
Now lets see these filters with an example for better understanding. Before starting with the example, lets see the output that will give a good idea of what we are trying to do..


Uppercase filter in AngularJS
           This filter converts text to a upper case text and below is the syntax for using this filter. We need to add this filter to the text using "|" pipe symbol as shown below
<p>My name is: {{ Name | uppercase }}</p>

LowerCase filter in AngularJS
   This filter converts text to lowercase text. Syntax is similar to uppercase text where we add a pipe symbol

<p> My name is: {{ Name | lowercase }}</p>

Currency filter in AngularJS
      The currency filter formats a number to a currency format. By default, the locale currency format is used.

<p>Price: {{ price | currency }}</p>

The filter Filter in AngularJS
       As said earlier filter can only be used on Array. Using this I can filter out subset of values containing particular character and many more functionalities can be achieved.

<p><b>4. AngularJS filter Filter Example:</b> </p>
<ul>
  <li ng-repeat="x in fruits | filter : 'C'">
    {{ x }}
  </li>
</ul>

 $scope.fruits= [
        'Grape',
        'Cranberries',
        'Apricot',
        'Avocado',
        'Rasberry',
        'Apple'
    ];

So in the above example I have filtered the array of fruits containing character "C".


OrderBy filter in AngularJS
      Oderby filter is self explanatory. So lets filter the Array containing fruits

<ul>
<li ng-repeat="x in fruits| orderBy">{{x}}</li>
</ul>

 $scope.fruits= [
        'Grape',
        'Cranberries',
        'Apricot',
        'Avocado',
        'Rasberry',
        'Apple'
    ];


Below is the complete program..

Filters.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p><b>1. AngularJS Uppercase Filter Example:</b> </p>
<p>My name is: {{ Name | uppercase }}</p>

<p><b>2. AngularJS Lowercase Filter Example:</b> </p>
<p> My name is: {{ Name | lowercase }}</p>

<p><b>3. AngularJS Currency Filter Example:</b> </p>
<p>Price: {{ price | currency }}</p>

<p><b>4. AngularJS filter Filter Example:</b> </p>
<ul>
  <li ng-repeat="x in fruits | filter : 'C'">
    {{ x }}
  </li>
</ul>

<p><b>5. AngularJS OrderBy Example:</b> </p>
<ul>
<li ng-repeat="x in fruits| orderBy">{{x}}</li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.Name = "Robert",
    $scope.price = 33;
    $scope.fruits= [
        'Grape',
        'Cranberries',
        'Apricot',
        'Avocado',
        'Rasberry',
        'Apple'
    ];
});
</script>

</body>
</html>

Hope this tutorial helps you to understand the below stuff :

  • Uppercase filter in AngularJS
  • Lowercase filter in AngularJS
  • Currency filter in AngularJS
  • Filter filter in AngularJS
  • Orderby filter in AngularJS




Reactions:

0 comments :

Post a Comment