Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS, Basic to Expert: Day Five

DZone 's Guide to

AngularJS, Basic to Expert: Day Five

AngularJS may be old, but it's still widely used in the industry. Read on to learn how to use filters with this great JavaScript framework.

· Web Dev Zone ·
Free Resource

Introduction:

In my previous articles, we learned what AngularJS is, some basics about AngularJS and directives in AngularJS, and we look at the main concepts in AngularJS (modules, models, controllers, scope, and data binding), and used them in our AngularJS demo application.

You can check previous articles here:

  1. AngularJS From Basic to Expert: Day One

  2. AngularJS From Basic to Expert: Day  Two

  3. AngularJS From Basic to Expert: Day Three

  4. AngularJS From Basic to Expert: Day Four

In this article, we will learn gow to use filters in AngularJS. We'll explore different filters one-by-one and continue with our AngularJS demo application which we used in previous articles.

Filters in AngularJS

Filters are used to format data in AngularJS. 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 to add a filter:

{{ filter_expression | filter }}
Or
{{ filter_expression | filter : expression }}
Or
{{ filter_expression | filter : expression : comparator : key}}

For example: 

  • Expression Price: {{12345}}

  • Without filtering, it displays Price: 12345 on the view.

  • With filtering expressions: Price: {{12345| currency}}

  • Without filtering 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 needs.

Price: {{ 12345| currency : ‘€’ }}

Output: Price: €12345.00

Filters can be used with the expressions in the view, explained above; when we use filters in the view template, filters are only executed when their inputs change.

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.

Built-in Filters in AgularJS:

AngularJS provides many built-in filters to transform data:

Name

Description

uppercase

Format text and convert it to upper case text.

lowercase

Format text and convert it to lower case text.

currency

Formats numbers in a currency format.

filter

Filters the array to a subset of the array based on the provided criteria.

date

Formats a date to a specified format.

orderby

Orders the array based on provided criteria.

number

Formats a number to a text string.

json

Formats an object to the JSON string.

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

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

<!DOCTYPE html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">  
</script>  
<script>  
     var angApp = angular.module("MyERPDemoApp", []);  

    //Creating controller with name UserController.  
    angApp.controller('UserController', function($scope) {  
    $scope.welcomenote="Welcome to Angular JS world";  
    $scope.title="Angular JS filter example";  

    $scope.PersonNames = [  
        {name:'arvind singh baghel',DOB:new Date(),country:'India', fee: 100},  
        {name:'tom cruis',DOB:new Date(),country:'united States',fee:null} ,   
        {name:'denial crg',DOB:new Date(),country:'United kingdom',fee:null},  
        {name:'ronaldo',DOB:new Date(),country:'brazil',fee:1000} ,           
        ];  

    $scope.orderByThis = function(data) {  
    $scope.customOrderBy = data;        
    }     

   });  

</script>  
</head>  
<body ng-app="MyERPDemoApp" ng-controller="UserController">  

<!-- uppercase filter -->  
Uppercase Filter : <span ng-bind="welcomenote | uppercase">  </span></br>  
<!-- lowercase filter -->  
lowercase filter : <span> {{ title | lowercase}} </span></br>  

<p>Enter Name To Filter : <input type="text" ng-model="name"><p>  
<table border="1" >  
<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>  
</tr>  
       <!-- filter and orderBy filter-->  
    <tr ng-repeat="person in PersonNames | filter:name | orderBy:customOrderBy">  
         <!-- customer myNewFormat filter -->  
        <td>{{person.name }}</td>  
         <!-- date filter -->  
         <td>{{person.DOB | date:'dd/MM/yyyy'}}</td>  
        <td>{{person.country}}</td>  
         <!-- currency filter -->  
         <td>{{person.fee | currency}}</td>  
    </tr>  
</table>  
</body>  
</html>  

Run the above example and look at the output:

Image title

Summary:

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

Get AngularJS complete series here: https://programingthress.com/

Topics:
angularjs ,filter ,web dev ,javascript ,web application development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}