Hi, My name is Sandeep Kumar and I am a Software Engineer from INDIA.
Connect with me on LinkedIn | WhatsApp me

What are the common filters used in angular js?

Author: FrontBackGeek | Published Date: January 6, 2022 |   Angular js

Filters can do three different things, format, sort and filter data.

Filter can be used within a binding expression or a directive, to apply filter we use pipe ( | ) character.

Some of the common data filters are :

  • lowercase
  • uppercase
  • number
  • currency
  • date

Let’s understand with date filter

date Filter :

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var newApp = angular.module(“newModule”, []);
        newApp.controller(“newController”, function ($scope) {
            $scope.date = new Date();
        })
    </script>
</head>
    <div ng-app=“newModule” ng-controller=“newController”>
       <i>Date : {{date | date : ‘MM/dd/yyyy’}}</i>
    </div>
<body>
</body>
</html>

In the above code we are getting current date from are system using $scope.date variable, this date variable format is Sun Jan 09 2022 10:40:24 GMT+0530 (India Standard Time).

Now to format this in readable format we will use date pipe.

<i>Date : {{date | date : ‘MM/dd/yyyy’}}</i>

After using this date pipe our output will be Date : 01/09/2022.

This is my current date of writing this blog.

There are different formats for date pipe.

  • yyyy = 4 digit year like 1990
  • yy = 2 digit like if its 1990 then it will display 90
  • MMMM =January to December.
  • MMM = 01-12
  • M = 1-12
  • dd = 01-31
  • d = 1-31

limitTo Filter :

This filter can be used to limit the number of characters in a string.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var newApp = angular.module(“newModule”, []);
        newApp.controller(“newController”, function ($scope) {
            $scope.message = “This is a message to test limit filter”;
           
        })
    </script>
</head>
    <div ng-app=“newModule” ng-controller=“newController”>
       <i>Message : {{message | limitTo : 15 : 0}}</i>
    </div>
<body>
</body>
</html>

In this example we have a message variable with a string “This is a message to test limit filter”.

With limitTo filter we can get part of string by assigning a limit value and begin value.

{{expression | limitTo : limit : begin}}

In our program we are assign limit to 15 and begin to 0. The index value of a string is always starts with 0 so output of this program will be “Message : This is a messa”.

index value of 15 is limit to this filter so the string will cut at 15 index. which is a of messa in output.

orderBy Filter :

We use this filter to sort the data.

{{orderExpression | orderBy : expression : reverse}}

For example

ng–repeat = “employe in employees | orderBy : ‘salary’ : false”

To sort in ascending order set reverse to false to sort in a descending order set reverse to true.

Tags :   angular jsangular js common filtersangular js filtersangular js pipe

  Search Article Here

Angular js Articles