Skip to content
Related Articles

Related Articles

Improve Article

What are Filters in AngularJS ?

  • Last Updated : 29 Jul, 2021
Geek Week

In this article, we will be discussing filters in AngularJS. Filters can be added in AngularJS to format data to display on UI without changing the original format. Filters can be added to an expression or directives using the pipe | symbol.

{{expression | filterName:parameter }}

AngularJS Filters: AngularJS provides filters to transform data of different data types. The following table shows the significant filters:

Filter NameDescription
currencyIt is used to convert a number into a currency format.
dateIt is used to convert a date into a specified format.
filterIt is used to filter the array and object elements and return the filtered items.
jsonTo convert a JavaScript object into JSON.
limitToIt is used to return an array or a string that contains a specified number of elements.
lowercaseIt is used to convert a string into lowercase letters.
uppercaseIt is used to convert a string into uppercase letters.
numberIt is used to convert a number into a string or text. 
orderByIt sorts an array based on specified predicate expressions.

1. Currency Filter: This filter is used to convert a number into a currency format. When no currency format is implemented, the currency filter uses the local currency format.
 

Syntax: 

{{ currency_expression | currency : symbol : fractionSize}}

Example:



HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <div ng-app="app1" ng-controller="costCtrl">
        <h2>Price: {{ price | currency }}</h2>
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("costCtrl", function ($scope) {
            $scope.price = 100;
        });
    </script>
 
     
<p>
        This currency filter formats a
        number to a currency format.
    </p>
 
</body>
 
</html>

Output:

The currency filter formats a number as currency.

2. Date Filter: This filter is used to convert a date into a specified format. If the date format is not specified, then the default format of date is used ‘MMM d, yyyy’.
 

Syntax:

{{ date | date : format : timezone }}

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body ng-app>
    <h1>AngularJS Date Filter</h1>
     
    <div ng-init="person.DOB = 323234234898">
        Default date: {{person.DOB| date}} <br />
        Medium date: {{person.DOB| date:'medium'}} <br />
        Full date: {{person.DOB | date:'fullDate'}} <br />
        Year: {{person.DOB | date:'yyyy'}} <br />
    </div>
</body>
 
</html>

Output:

Date Filter

3. filter Filter: This filter is used to filter the array and object elements and return a new array.
  
 Syntax:

{{ expression | filter : filter_criteria }}

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <div ng-app="app1" ng-controller="namesCtrl">
        <ul>
            <li ng-repeat="x in names | filter : 'i'">{{ x }}</li>
        </ul>
    </div>
 
    <script>
        angular.module("app1", []).controller(
            "namesCtrl", function ($scope) {
                $scope.names = [
                    "Dhoni",
                    "Virat",
                    "Sachin",
                    "Rohit",
                    "Suresh",
                    "Sehwag",
                    "Zadeja",
                    "Ashwin",
                    "Harbhajan",
                ];
            });
    </script>
 
     
<p>
        This example displays only the names
        containing the letter "i".
    </p>
 
</body>
 
</html>

Output:



The filter Filter

4. json Filter: This filter is used to convert a JavaScript object into JSON.
 

Syntax: 

 {{ object | json : spacing }}

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <div ng-app="vegetable" ng-controller="vegetableCtrl">
        <h1>Vegetable:</h1>
 
        <pre>{{vegetable | json : 10}}</pre>
    </div>
 
    <script>
        var app = angular.module("vegetable", []);
        app.controller("vegetableCtrl", function ($scope) {
            $scope.vegetable = [
                "Beetroot",
                "Carrot",
                "Potato",
                "Asparagus",
                "Eggplant",
            ];
        });
    </script>
</body>
 
</html>

Output:

json Filter.

5. limitTo Filter: This filter is used to return an array or a string that contains a detailed number of elements. It is used for strings and numbers. It returns a string containing only the specified number of digits and characters.
 

Syntax:

{{ object | limitTo : limit : begin }}

  
Parameters:

limit: Specifies the length of the returned array or strings.

Begin: Specifies the index with which the limitation begins. By default, its value is zero.

 Example: 



HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <div ng-app="app1" ng-controller="sizeCtrl">
         
<p>
            Displays only the first 3 cars
            because limit is 3 (positive).
        </p>
 
 
        <ul>
            <li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
        </ul>
 
         
<p>
            Displays only the last 3 cars
            because limit is -3 (negative).
        </p>
 
 
        <ul>
            <li ng-repeat="x in cars | limitTo : -3">{{x}}</li>
        </ul>
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("sizeCtrl", function ($scope) {
            $scope.cars = ["Alto", "Breeza",
            "ciaz", "Maruti", "Fortuner", "Verna"];
        });
    </script>
</body>
 
</html>

Output: 

limitTo Filter.

6. lowercase: This filter is used to convert a string into lowercase letters.
 

Syntax:

{{expression|lowercase}}

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <h2>AngularJS | lowercase</h2>
 
    <div ng-app="app1" ng-controller="lowCtrl">
        <strong>Input:</strong>
        <input type="text" ng-model="string" />
        <strong>Output:</strong>
        {{string|lowercase}}
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("lowCtrl", function ($scope) {
            $scope.string = "";
        });
    </script>
</body>
 
</html>

Output: 

lowercase Filter.

  
7. uppercase: This filter is used to convert a string into an uppercase letter.
 

Syntax:

{{ string | uppercase}}

 Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <h2>AngularJS | uppercase</h2>
    <div ng-app="app1" ng-controller="upCtrl">
        <strong>Input:</strong>
        <input type="text" ng-model="string" />
        <strong>Output:</strong>
        {{string|uppercase}}
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("upCtrl", function ($scope) {
            $scope.string = "";
        });
    </script>
</body>
 
</html>

Output:

uppercase Filter.

8. number Filter: This filter is used to convert a number into a string or text.
 



Syntax:

{{ string| number : fractionSize}}

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <div ng-app="app1" ng-controller="nCtrl">
        <h1>{{value | number : 4}} kg</h1>
    </div>
 
    <script>
        var app = angular.module("app1", []);
        app.controller("nCtrl", function ($scope) {
            $scope.value = 34355;
        });
    </script>
 
     
<p>The value is written with three decimals.</p>
 
</body>
 
</html>

Output: 

number Filter.

9. orderBy Filter: This filter sorts an array based on specified predicate expressions.
 

Syntax:

{{ orderBy_expression | orderBy : expression : reverse }}  

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body ng-app="app1">
    <h1>AngularJS | orderBy</h1>
    <div ng-controller="myController">
        <select ng-model="SortOrder">
            <option value="+name">Name (asc)</option>
            <option value="-name">Name (dec)</option>
            <option value="+phone">Phone (asc)</option>
            <option value="-phone">Phone (dec)</option>
        </select>
        <ul ng-repeat="person in persons | orderBy:SortOrder">
            <li>{{person.name}} - {{person.phone}}</li>
        </ul>
    </div>
     
    <script>
        var myApp = angular.module("app1", []);
        myApp.controller("myController", function ($scope) {
            $scope.persons = [
                { name: "John", phone: "008-452-8276" },
                { name: "Mahira", phone: "879-303-3345" },
                { name: "Minakshi", phone: "545-474-4351" },
                { name: "Billa", phone: "545-788-5678" },
                { name: "vanya", phone: "463-494-8705" },
                { name: "Rashi", phone: "315-315-5698" },
            ];
            $scope.SortOrder = "+name";
        });
    </script>
</body>
 
</html>

Output:

orderBy Filter.




My Personal Notes arrow_drop_up
Recommended Articles
Page :