Understanding Filters In AngularJS - Part 6

by Santhakumar Munuswamy

  Posted on  31 December 2015

  AngularJS


 

This article explains filters with a sample application and its usage. In my previous article, we saw the understanding of Directives with a sample application. Here are the series of article written on AngularJS,

What is Filters

We can use filter format data for displaying it to the user. The formatted value of an expression is applied to your output data in AugularJs. We can use built-in Filters and create own filters like custom filters.

Filters Type

We can able to implement the following types of directives in AngularJs

1. Currency

2. Date

3. Filter

4. LimitTo

5. JSON

6. Lowercase

7. Uppercase

8. OrderBy

It is enabled to access the AngularJS built in filters like currency, date, limitTo, number and so on. We will discuss list of the filters details as in the following table. 

List of AngularJS Filters Table

S.No Filter Name Filter Description
1 Currency It is used to formats number as currency
2 Date It is used to date formats
3 Filter It is used find the item from array
4 Lowercase It is used to convert string as lowercase
5 LimitTo It is containing new array with specified number of items
6 Json It is used to convert javascript object to json object
7 OrderBy It is used to order by array
8 Uppercase It is used to convert string as uppercase


How to use filters  

{{ expression | filter_name }}  
{{ expression | filter_name1 | filter_name2 | ... }}

Currency

{{ currency_expression | currency : symbol : fractionSize}}  

Lowercase

{{ lowercase_expression | lowercase}} 

Uppercase

{{ uppercase_expression | uppercase}}  

OrderBy

{{ orderBy_expression | orderBy : expression : reverse}}  

Number

{{ number_expression | number : fractionSize}}  

LimitTo

{{ limitTo_expression | limitTo : limit : begin}}  

JSON

{{ json_expression | json : spacing}}  

Filter

{{ filter_expression | filter : expression : comparator}}  

Date

{{ date_expression | date : format : timezone}} 

Step 1:

Open Visual Studio 2015 and go to file menu and point new and then click new project. New ASP.NET project window will open, you can select a ASP.NET Web Application and type Project Name AngularJsFiltersDemo, Choose the project location path and then click OK button.

New ASP.NET project window will open, you can select a Empty Template with No Authentication and then click OK button

 

Go to Solution Explorer and right click the project name and then click Manage NuGet Packages










NuGet Package Manager window will open and you can type AngularJS and browse. Also selectAngularJS.Core and click Install button.  

 












Preview window will open and you can see the AngularJS version installing details. Click OK button and after it is successfully installed in AngularJS, you can see the following  

 




You can see AngularJsFiltersDemo project structure as in the following screenshot.   

 
 










Add CurrencyView.html

Go to Solution Explorer and right click the project name and Add, then click the HTML Page. You can type the item name CurrencyView.html and click OK button.

Add CurrencyController.js

Go to Solution Explorer and right click the project name and Add, then click the JavaScript file. You can type the item name CurrencyController.js and click OK button.

Step 2: CurrencyView.html code here,

<!DOCTYPE html>  
<html>  
<head>  
    <title> San2debug.net | AngularJs Filters Application Demo </title>  
    <meta charset="utf-8" />  
    <script src="Scripts/angular.min.js"></script>  
    <script src="CurrencyController.js"></script>   
</head>  
<body>  
    <h2> AngularJs Salary Calculation Application Demo </h2>  
    <div ng-app="mainApp" ng-controller="CurrencyController">  
        Basic Salary: <input type="number" ng-model="basic" /><br /><br />  
        HRA:  <input type="number" ng-model="hra" /><br /><br />  
        Food Allowance:  <input type="number" ng-model="food" /><br /><br />  
        <hr />  
        <strong>Total Salary</strong>={{ basic + hra + food | currency}}  
      </div>  
</body>  
</html>

CurrencyController.js code here,

var mainApp = angular.module('mainApp', []);  
mainApp.controller('CurrencyController', function ($scope) {  
    $scope.basic = 7000;  
    $scope.hra = 2300;  
    $scope.food = 1200;  
});  

Add EmployeeView.html

Go to Solution Explorer and right click the project name and Add, then click the HTML Page. You can type the item name EmployeeView.html and click OK button.

Add EmployeeController.js

Go to Solution Explorer and right click the project name and Add, then click the JavaScript file. You can type the item name EmployeeController.js and click OK button.

EmployeeView.html code here

<!DOCTYPE html>  
<html>  
<head>  
    <title> San2debug.net | AngularJs Filters Application Demo </title>  
    <meta charset="utf-8" />  
    <script src="Scripts/angular.min.js"></script>  
    <script src="EmployeeController.js"></script>   
</head>  
<body>  
    <center>  
        <h2> AngularJs Filters Application Demo </h2>  
        <div ng-app="mainApp" ng-controller="EmployeeController">  
            <table border="1" cellpadding="3" cellspacing="6" width="50%">  
                <tr>  
                    <td>First Name:</td>  
                    <td><input type="text" ng-model="employee.firstName"></td>  
                </tr>  
                <tr>  
                    <td>Last Name:</td>  
                    <td><input type="text" ng-model="employee.lastName"></td>  
                </tr>  
                <tr>  
                    <td>Salary:</td>  
                    <td><input type="number" ng-model="employee.salary"></td>  
                </tr>  
            </table>  
            <hr />  
            <table border="0">  
                <tr>  
                    <td><strong>Full Name (in Capital Letters): </strong>{{employee.fullName() | uppercase}} <br /> </td>  
                </tr>  
                <tr>  
                    <td><strong>Full Name (in Normal Letters): </strong>{{employee.fullName() | lowercase}} <br /> </td>  
                </tr>  
                <tr>  
                    <td><strong>Salary: </strong>{{employee.salary | currency}}  <br /></td>  
                </tr>  
            </table>  
        </div>  
    </center>  
</body>  
</html> 

EmployeeController.js code here,

var mainApp = angular.module('mainApp', []);  
mainApp.controller('EmployeeController', function ($scope) {  
  
    $scope.employee = {  
  
        firstName: "Santhakumar",  
        lastName: "Munuswamy",  
        salary: 10000,  
  
        fullName: function () {  
  
            var employeeObject;  
  
            employeeObject = $scope.employee;  
  
            return employeeObject.firstName + " " + employeeObject.lastName;  
        }  
    };  
  
});  

Steps 3: AngularJS Filters Application demo output as in the following screenshot,  

Conclusion

This article helps you to understand the Filters with a sample application using Visual Studio 2015. Thank you for reading my articles. Kindly share your comments or suggestions

 


About the Author
He is a Technical Lead, C# Corner MVP, Author and founder of the blog www.san2debug.net, has over 9+ years experience on Microsoft Technologies like C#.Net, ASP.Net, ADO.Net, MVC, WCF, Ajax, IIS, SQL Server, Windows Phone and some developmet tools. He is an actively spending his valuable time to popular .Net Community like C# Corner, Microsoft TechNet Wiki, DZone, Stackoverflow, DotNetSpark and etc.

Follow Me: Facebook, Twitter, Google Plus, LinkedIn
blog comments powered by Disqus


Month List

Community Badges