AngularJS built-in Filters and custom Filter example


In this article, I am going to explain you AngularJS bulit-in filters and custom filter with example. Below are the AngularJS built-in filters.

  • uppercase: It converts string into upper case.
  • lowercase: It converts string into upper case.
  • orderBy: It is use to sort array data.
  • currency: It converts number to currency.
  • filter: It select subset from an array.
  • date: Format a date to a specified format
  • json: Format an object to a JSON string.
  • limitTo: Limits an array/string, into a specified number of elements/characters.
  • number: Format a number to a string.
  • Custom : You can create own filter as shown below in example.

Filters can be added to expressions by using the pipe character |, followed by a filter.

1) uppercase Filter:

The uppercase filter is use to convert string into upper case.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.FirstName = "John";
            $scope.LastName = "Doe";
        });

    </script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        First name: {{FirstName | uppercase}}
    </div>
</body>
</html>
Result:
First name: JOHN

2) lowercase Filter:

The lowercase filter is use to convert string into lower case.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.FirstName = "John";
            $scope.LastName = "Doe";
        });
 </script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        Last name: {{LastName | lowercase}}
    </div>
</body>
</html>
Result:
Last name: doe

3) orderBy Filter:

The orderBy filter is use to sort array data in ascending or descending order. Here we are using orderBy with ng-repeat directive.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.countries = [
                 { name: "rahul" , country: "India" },
                 { name: "Mike" , country: "Usa" },
                 { name: "Mary" , country: "Australia" }
            ];
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <ul ng-repeat ="c in countries | orderBy:'country' ">
        <li>{{c.name +' , '+ c.country}}</li>
    </ul>
</body>
</html>
Result:
Mary , Australia
rahul , India
Mike , Usa

By default it will sort data in ascending order, you can use + for ascending order and - for descending order.

<ul ng-repeat ="c in countries | orderBy:' -country' ">
    <li>{{c.name +' , '+ c.country}}</li>
</ul>
Result:
Mike , Usa
rahul , India
Mary , Australia

You can also use reverse parameter which will reverse data. You can set reverse parameter to true or false as shown below.
Here, we are first sorting data in ascending order then revering (sorting in descending order).

<ul ng-repeat ="c in countries | orderBy:'country': true">
    <li>{{c.name +' , '+ c.country}}</li>
</ul>
Result:
Mike , Usa
rahul , India
Mary , Australia

4) currency Filter

The currency Filter converts number to currency. By default dollar curreny in applied.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.price = 58;
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    price: {{price | currency}}
</body>
</html>
Result:
price: $58.00 

You can add and remove currency as shown below.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.price = 58;
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    rupee currency<br />
    price: {{price | currency:"₹"}} <br /><br />

    dollar currency<br />
    price: {{price | currency:"$"}}<br /><br />

    remove currency<br />
    price: {{price | currency:value=""}} <br /><br />

    remove currency<br />
    price: {{price | currency:""}}
</body>
</html>
Result:
rupee currency
price: ₹58.00 
dollar currency
price: $58.00
remove currency
price: 58.00
remove currency
price: 58.00

5) filter Filter:

The filter Filter is used to return subset from an array if record is matched. Here, we are searching in names array which contains letter 'a'.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.names = [
        { name: "Rahul" },
        { name: "Mike" },
        { name: "Mary" },
        { name: "Sumit" },
        { name: "Deepak" }
            ];
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <ul ng-repeat ="n in names | filter:'a' ">
        <li>{{n.name}}</li>
    </ul>
</body>
</html>
Result:
Rahul
Mary
Deepak

filter Filter with TextBox search:

We will take user input from textbox and apply filter Filter using ng-model as shown below.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.names = [
        { name: "Rahul" },
        { name: "Mike" },
        { name: "Mary" },
        { name: "Sumit" },
        { name: "Deepak" }
            ];
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <input type="text" ng-model="searchByname" />
    <ul ng-repeat ="n in names | filter : searchByname ">
        <li>{{n.name}}</li>
    </ul>
</body>
</html>
Result:
AngularJS bulit-in filters and custom filter with example

orderBy Filter with user Input:

We will sort data using orderBy filter with input from user. Here, data is sorted by name column in ascending order initially after that on click of table header, data is sorted by name and country column using ng-click directive.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.countries = [
              { name: "Yogendra" , country: "India" },
              { name: "Mike" , country: "Usa" },
              { name: "Mary" , country: "Australia" },
              { name: "Sumit" , country: "Canada" }
            ];
            $scope.orderByName = "name"; // set order by name initially
            $scope.orderByX = function (input) {
                debugger;
                $scope.orderByName = input;
            };
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <table border="1" style="border-collapse:collapse;">
        <thead>
            <tr>
                <th ng-click="orderByX('name')"> Click here for Order by name </th>
                <th ng-click="orderByX('country')"> Click here for Order by country </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat ="c in countries | orderBy:orderByName ">
                <td>{{c.name}}</td>
                <td>{{c.country}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
Result:
AngularJS orderBy filter

6) date Filter:

The date filter is use to formats a date to a specified format. The date can be a date object, milliseconds, or a datetime string like "2016-01-05T09:05:05.035Z".
By default, the format is "MMM d, y" (Jan 5, 2016).
Syntax: {{ dateVariable | date : format : timezone }}

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.CurrentDate = new Date();
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <p> Current Date is : {{ CurrentDate | date }}</p>
</body>
</html>
Result:
Current Date is : Mar 9, 2019

7) json Filter:

The json filter converts a JavaScript object into a JSON string.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.Employee = {
                "Id": "101",
                "Name": "John"
            };
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <pre>{{Employee | json}}</pre>
</body>
</html>
Result:
{
  "Id": "101",
  "Name": "John"
}

8) limitTo Filter:

The limitTo filter returns an array or a string containing only a specified number of elements.
When the limitTo filter is used for arrays, it returns an array containing only the specified number of items.
When the limitTo filter is used for strings, it returns a string containing, only the specified number of characters.
When the limitTo filter is used for numbers, it returns a string containing only the specified number of digits.
Use negative numbers to return elements starting from the end of the element, instead of the beginning.
Syntax: {{ object | limitTo : limit : begin }}

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.Numbers = [55, 20, 5, 100, 60];
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <ul>
        <li ng-repeat ="n in Numbers | limitTo : 2">
            {{n}}
        </li>
    </ul>
</body>
</html>
Result:
55
20

9) number Filter:

The number filter formats a number to a string.
Syntax: {{ string | number : fractionsize }}

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.Numbers = 150505;
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
  <span>{{Numbers | number}}</span>
</body>
</html>
Result:
150,505

10) Custom Filter:

We can create own filter and attached filter to particular module. Here, in below example we are converting employee gender as Male, Female or Gender unknown depend on the column data that is 1, 2 or 0.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
    <script>
        var app = angular.module( "myModule" , []);
        app.controller("myController", function ($scope) {
            $scope.employees = [
        { name: "Rahul" , gender: "1" },
        { name: "Mike" , gender: "1" },
        { name: "Mary" , gender: "2" },
        { name: "Sumit" , gender: "1" },
        { name: "XYZ" , gender: "0" }
            ];
        });

        app.filter("genderFilter", function () {
            return function (x) {
                var out = "";
                if (x == "1") {
                    out = "Male";
                }
                else if (x == "2") {
                    out = "Female";
                }
                else {
                    out = "Gender unknown" ;
                }
                return out;
            }
        });
    </script>
</head>
<body ng-app="myModule" ng-controller="myController">
    <table border="1" style="border-collapse:collapse;">
        <tr>
            <th>Name</th>
            <th> Gender from database </th>
            <th> Gender by using custom filter </th>
        </tr>
        <tr ng-repeat ="e in employees">
            <td>{{e.name}}</td>
            <td>{{e.gender}}</td>
            <td>{{e.gender | genderFilter}}</td>
        </tr>
    </table>
</body>
</html>
Result:
AngularJS custom filter for gender


Share This


blog comments powered by Disqus