AngularJS Filters


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>

Output


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


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


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


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


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.