AngularJS Filters

By

Filters In Angular Js

We can apply Angular JS Filters on expressions and directives by using the pipe symbol ( | ) . Filters which are used with expression are
Uppercase : The uppercase filter converts string to the uppercase.
Lowercase : The lowercase filter convert string to the lowercase.
Currency : The currency filter formats a number value to currency format.
Lets see the examples of these three filters :
Uppercase-Lowercase-Filter Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



 <title>Welcome in the Angular JS</title>



 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app="sampleApplication">



  <div ng-controller="sampleController" >



    My Name is : {{name | uppercase}} 

My Name is : {{name | lowercase}} 


    Total Amount is : {{amount | currency}} 



  </div>



<script> 



  var app = angular.module("sampleApplication", []); 



  app.controller("sampleController", function($scope) { 



    $scope.name = "Thomas"; 



    $scope.amount = "1500"; 



  }); 



</script>   



</body>



</html>
TRY IT »

Output:

My Name is : THOMAS My Name is : thomas Total Amount is : $1,500.00

Uppercase filter apply to the {{ name }},it converts the name into the uppercase and same for the lowercase filter.Currency filter apply to the amount 1500 and the filter prefix $ sign to the amount and show the amount to the two decimal places. This is the default format of the currency filter. Lets understand more with an another example for currency filter.

Currency-Filter Example:


<!DOCTYPE html>



<html lang="en-US">



<head>



 <title>Welcome in the Angular JS</title>



 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app="sampleApplication">



  <div ng-controller="sampleController" >



    Total Amount is : {{amount | currency : '$' : 3}} 



  </div>



<script> 



  var app = angular.module("sampleApplication", []); 



  app.controller("sampleController", function($scope) { 



    $scope.amount = "1500"; 



  }); 



</script>



</body>



</html>

Output:

Total Amount is : $1,500.000

You can change this default currency format by just write colon after the currency and give sign in string format you want to show and then again colon and give the number value to show digits after the decimal. See the output in the green box.

Date Filter

Date filter used to change the format of date. Lets see some date formats with the help of an example.
Date-Filter Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app="sampleApplication">



    <div ng-controller="sampleController">



        Today's Date is : {{todayDate}} <br />



        Today's Date is : {{todayDate | date:'medium'}} <br />



        Today's Date is : {{todayDate | date:'short'}} <br /><br />




        Today's Date is : {{todayDate | date:'fullDate'}} <br />



        Today's Date is : {{todayDate | date:'longDate'}} <br />



        Today's Date is : {{todayDate | date:'mediumDate'}} <br />



        Today's Date is : {{todayDate | date:'shortDate'}} <br /><br />




        Today's Date is : {{todayDate | date:'dd-MM-yy'}} <br />



        Today's Date is : {{todayDate | date:'dd-MM-yyyy'}} <br />



        Today's Date is : {{todayDate | date:'dd-MMM-yyyy'}} <br /><br />




        Today's Date is : {{todayDate | date:'dd/MM/yy'}} <br />



        Today's Date is : {{todayDate | date:'dd/MM/yyyy'}} <br />



        Today's Date is : {{todayDate | date:'dd/MMM/yyyy'}} <br />



    </div>



<script>



    var app = angular.module('sampleApplication', []);



    app.controller('sampleController', function ($scope) {



        $scope.todayDate = new Date();



    });



</script>  



</body>



</html>

Output:

Today's Date is : "2020-01-21T11:32:25.591Z"
Today's Date is : Jan 21, 2020 5:02:25 PM
Today's Date is : 1/21/20 5:02 PM

Today's Date is : Tuesday, January 21, 2020
Today's Date is : January 21, 2020
Today's Date is : Jan 21, 2020
Today's Date is : 1/21/20

Today's Date is : 21-01-20
Today's Date is : 21-01-2020
Today's Date is : 21-Jan-2020

Today's Date is : 21/01/20
Today's Date is : 21/01/2020
Today's Date is : 21/Jan/2020

Filters for directives

Filter : It selects a subset of items from the collections based on the searched text and return a new array which contains searched items.
Searching Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />



    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>



</head>



<body ng-app="sampleApplication">



    <div ng-controller="sampleController">



        <div class="container">



            <div class="row">



                <div class="col-md-12">



                    Search <input type="text" ng-model="searchEmployee" />



                </div>



            </div>



            <table class="table table-striped ">



                <thead>



                    <tr>



                        <th>Name</th>



                        <th>Age</th>



                        <th>Phone Number</th>



                        <th>Action</th>



                    </tr>



                </thead>



                <tbody>



                    <tr ng-repeat="emp in employees | filter:searchEmployee">



                        <td>{{emp.name}}</td>



                        <td>{{emp.age}}</td>



                        <td>{{emp.phoneNumber}}</td>



                        <td><button class="btn btn-primary btn-xs">Edit</button> &nbsp; <button class="btn btn-danger btn-xs">Delete</button></td>



                    </tr>



                </tbody>



            </table>



        </div>



    </div>



<script>



    var app = angular.module('sampleApplication', []);



    app.controller('sampleController', function ($scope) {



        $scope.employees = [{ name: "Kripke", age: "25", phoneNumber: "563544466" },



                          { name: "Galtieri", age: "34", phoneNumber: "657865856" },



                          { name: "Freud", age: "27", phoneNumber: "679423435" },



                          { name: "Einstein", age: "25", phoneNumber: "343667789" },



                          { name: "McClung", age: "44", phoneNumber: "456724423" },



                          { name: "Milne", age: "35", phoneNumber: "789345564" },



                          { name: "Morales", age: "26", phoneNumber: "243567333" },



                          { name: "Roux", age: "50", phoneNumber: "879344666" }];



    });



</script>    



</body>



</html>

Output:


Search 
NameAgePhone NumberAction
Kripke25563544466   
Galtieri34657865856   
Freud27679423435   
Einstein25343667789   
McClung44456724423   
Milne35789345564   
Morales26243567333   
Roux50879344666   

orderBy

orderBy used to sort the array by an expression. By default for string values it sort by alphabetically and for the number values it sort by numerically,when you sort the array by numbers make sure that they are saved as numbers not as strings otherwise orderBy filter will not work.
Sorting Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />



    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>



</head>



<body ng-app="sampleApplication">



    <div ng-controller="sampleController">



        <div class="container">



            <div class="row">



                <div class="col-md-12">



                    Search <input type="text" ng-model="searchEmployee" />



                </div>



            </div>



            <table class="table table-striped ">



                <thead>



                    <tr>



                        <th>Name</th>



                        <th>Age</th>



                        <th>Phone Number</th>



                        <th>Action</th>



                    </tr>



                </thead>



                <tbody>



                    <tr ng-repeat="emp in employees | filter:searchEmployee | orderBy:'-age'">



                        <td>{{emp.name}}</td>



                        <td>{{emp.age}}</td>



                        <td>{{emp.phoneNumber}}</td>



                        <td><button class="btn btn-primary btn-xs">Edit</button> &nbsp; <button class="btn btn-danger btn-xs">Delete</button></td>



                    </tr>



                </tbody>



            </table>



        </div>



    </div>



<script>



    var app = angular.module('sampleApplication', []);



    app.controller('sampleController', function ($scope) {



        $scope.employees = [{ name: "Stewart", age: "25", phoneNumber: "563544466" },



                          { name: "Stone", age: "34", phoneNumber: "657865856" },



                          { name: "Grudin", age: "27", phoneNumber: "679423435" },



                          { name: "Drucker", age: "25", phoneNumber: "343667789" },



                          { name: "Davis", age: "44", phoneNumber: "456724423" },



                          { name: "Crowfoot", age: "35", phoneNumber: "789345564" },



                          { name: "Confucius", age: "26", phoneNumber: "243567333" },



                          { name: "Burnett", age: "50", phoneNumber: "879344666" }];



    });



</script>



</body>



</html>

Output:

Search 
NameAgePhone NumberAction
Burnett50879344666   
Davis44456724423   
Crowfoot35789345564   
Stone34657865856   
Grudin27679423435   
Confucius26243567333   
Stewart25563544466   
Drucker25343667789   
We sort the employee collection by age. By default sorting is in ascending order if you want to do it in descending order simply prefix a ( - ) minus sign.













No comments:

Post a Comment