What are the common filters used in 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

ngrepeat = “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.

Related Posts

angular js icon

What is Angular js and what is module and controller ?

Angular js is a javascript framework which is used to build web applications. Benefits of angular js : Dependency injection Two way data binding Testing It uses…

angular js icon

What is two way data binding in angular js ?

Two way data binding keeps the model and view in sync at all times, i.e a change in model, updates the view and a change in view,…

angular js icon

What are angular js directives ? How ng-src and ng-repeat directive works.

Angular js let you extends HTML with new attributes called directives, Angular js has many built in directive two of them are ng-src and ng-repeat.  So if…

angular js icon

How to handle events in angular js

In this blog we will understand how to handle event actions like clicking a button. The common way to handle events is through the functions or methods….

Leave a Reply

Your email address will not be published. Required fields are marked *