Filter in AngularJs (Part 5)


Filter is one of the cool features of angularJs. It is used to indicate by pipeline symbol i.e “|”.
Filter can be added to expression and directive using a pipe character. It is used to format the data as per as our requirement.
There is the following filter example
1. Currency
2. Lowercase
3. Order By
4. Uppercase
5. Number
6. Date
7. Json
8. LimitTo

Now let see each filter example one by one

1. Currency Filter in angularJs :

Currency filter is used to format the currency as given below

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController" >
        Quantity : <input type="number" ng-model="quantity"    />
        Price: <input type="number" ng-model="price" />
        <p>Total: {{quantity*price | currency }} </p>

    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function ($scope) {
            $scope.quantity = 2;
            $scope.price = 200;
        });
    </script>
</body>
</html>

Currency Filter

Other example of Currency Filter with different format



<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    <script>
        var app = angular.module("MyApp", []);

        app.controller("MyController", function ($scope) {
            $scope.Qnt = 100;
            $scope.Price = 20;
        });
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyController">
      Price:  <input type= "text"  name="Price" value="" ng-model="Price" /> <br /><br />
      Quantity: <input type="text" name="Qnt" value=" " ng-model="Qnt" /><br /> <br />
        Total in US Dollor : {{ Price*Qnt | currency}} <br />
        Totla in RS : {{ Price*Qnt | currency :'Rs.' }} <br />
        No Fraction in RS : {{ Price*Qnt | currency:'Rs.':0}} <br />

    </div>
</body>
</html>

Custom Currency Filter

2. Example of Number Format filter

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="">
        Enter the input value: <input type="text" name="InputVal" ng-model="InputVal" value=" " /> <br /><br />
        Out Put Value in Number : {{ InputVal | number }} <br />
        Out Put Value in Number 2  : {{ InputVal | number:2 }} <br />
        Out Put Value in Number 4: {{ InputVal | number:4 }} <br />
    </div>
</body>
</html>

Number

3. Example of Lowercase and Uppercase filter



<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    <script>
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope) {
            $scope.firstName = "Chandradev";
            $scope.LastName = "Prasad";

        });
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyController">
        Complete Name (UpperCase)= {{ firstName +' '+ LastName |uppercase }} <br />
        Complete Name (LowerCase)= {{ firstName +' '+ LastName |lowercase }} <br />
    </div>
</body>
</html>

Case

4. Example of Order by Filter in angularJs

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    <script>
        angular.module('orderByExample', [])
           .controller('ExampleController', ['$scope', function ($scope) {
               $scope.friends =
                   [{ name: 'Chandradev', phone: '9241503289', age: 25 },
                    { name: 'Aman', phone: '9241503281', age: 26 },
                    { name: 'Karthik', phone: '9241503282', age: 21 },
                    { name: 'Adam', phone: '9241503283', age: 35 },
                    { name: 'Rohit', phone: '9241503284', age: 29 }];
           }]);
    </script>
</head>
<body ng-app="orderByExample">
    <div ng-controller="ExampleController">
        <table class="friend">
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
                <th>Age</th>
            </tr>
            <tr ng-repeat="friend in friends | orderBy:'name'">
                <td>{{friend.name}}</td>
                <td>{{friend.phone}}</td>
                <td>{{friend.age}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

OrderByFilter

5. Example of Date filter in AngularJs

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    
</head>
<body ng-app="">

    <p>
        <label>  Select the date</label>
        <input type="date"  id="date" ng-model="dateValue" />
    </p>
    <p>
        <b> Date Format in Full:</b>  {{dateValue | date :'fullDate'}}
    </p> 
    <p>
        <b> Date Format in Short: </b>  {{dateValue | date :'shortDate'}}
    </p>
    <p>
        <b> Date Format in dd/MM/yyyy:</b> {{dateValue | date :'dd/MM/yyyy'}}
    </p>

</body>
</html>

DateFilter

6. Example of Json filter in AngularJs
Json filter is used to filter data in Json format.

<!DOCTYPE html>	
<html>
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script>
           angular.module('radioExample', [])
             .controller('ExampleController', ['$scope', function($scope) {
               $scope.color = {
                 name: 'blue'
               };
               $scope.specialValue = {
                 "id": "12345",
                 "value": "green"
               };
             }]);
    </script>
</head>
<body ng-app="radioExample">
    <form name="myForm" ng-controller="ExampleController">
        <label>
            <input type="radio" ng-model="color.name" value="red">
            Red
        </label><br />
        <label>
            <input type="radio" ng-model="color.name" ng-value="specialValue">
            Green
        </label><br />
        <label>
            <input type="radio" ng-model="color.name" value="blue">
            Blue
        </label><br />
        <tt>color = {{color.name | json}}</tt><br />
    </form>
</body>
</html>
      

Json

7. Example of Limit To Filter:

It is used to filter number only upto specified in given range



<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    <script>
        angular.module('limitToExample', [])
        //var app = angular.module("limitToExample", [])
           .controller('ExampleController', ['$scope', function($scope) {
             $scope.numbers = [1,2,3,4,5,6,7,8,9];
             $scope.letters = "abcdefghi";
             $scope.longNumber = 2345432342;
             $scope.numLimit = 3;
             $scope.letterLimit = 3;
             $scope.longNumberLimit = 3;
           }]);
    </script>
</head>
<body ng-app="limitToExample">
    <div ng-controller="ExampleController">
        <label>
            Limit {{numbers}} to:
            <input type="number" step="1" ng-model="numLimit">
        </label>
        <p>Output numbers: {{ numbers |limitTo:numLimit }}</p>
        <label>
            Limit {{letters}} to:
            <input type="number" step="1" ng-model="letterLimit">
        </label>
        <p>Output letters: {{ letters | limitTo:letterLimit }}</p>
        <label>
            Limit {{longNumber}} to:
            <input type="number" step="1" ng-model="longNumberLimit">
        </label>
        <p>Output long number: {{ longNumber | limitTo:longNumberLimit }}</p>
    </div>
</body>
</html>

LimitTo

Summary:

In this article we learn the basic concept of filter in angularJs.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: