AngularJS Built-In filter examples

In this post, we will see about AngularJS inbuilt filter examples.

AngularJS tutorial:

    AngularJs hello world example AngularJs controller examples AngularJs ng-repeat example AngularJs Built-in filter example AngularJs custom filter example AngularJs ajax example using $http AngularJS RESTful web service JAXRS CRUD example using $http
We need to display output data in some other formats many times . For example: You need to display currency with the number. AngularJS provides many inbuilt filter for this purpose.
AngularJS filters are used to format data in views. "|" symbol is used to apply filter.
AngularJS filter can be applied in two ways
  • On AngularJS directives
  • On AngularJS expressions
Lets see some of inbuilt filters here.

Filter on expressions

uppercase

This filter is used to change format of text to uppercase.
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
 <script>
   var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.java2blogMsg = "Hello from Java2blog";   
});
  </script>
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">    
 </br>  
  {{java2blogMsg|uppercase}}   !!!  
</div>  
</body>  
</html> 
Output: HELLO FROM JAVA2BLOG !!!

lowercase

This filter is used to change format of text to lowercase.
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
 <script>
   var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.java2blogMsg = "Hello from Java2blog";   
});
  </script>
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">    
 </br>  
  {{java2blogMsg|lowercase}}   !!!  
</div>  
</body>  
</html> 
Output: hello from java2blog !!!

currency

This filter is used to format number into currency.
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
 <script>
   var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.cost= 500;   
});
  </script>
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">    
 </br>  
 Cost is {{cost|currency}} 
</div>  
</body>  
</html> 
Output: Cost is $500.00

limitTo

limitTo is used to display limited number of charcters
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
 <script>
   var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.java2blogMsg = "Hello from Java2blog";   
});
  </script>
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">    
 </br>  
 {{java2blogMsg | limitTo:5}} !!!  
</div>  
</body>  
</html> 
Output:
Hello !!!

date

Date is used to format dates in specific formats.
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
 <script>
   var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
     $scope.date = (new Date()).getTime() ;   
});
  </script>
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">    
  Today 's date  : {{date | date:'dd/MM/yyyy'}}   
</div>  
</body>  
</html> 
Output: Today 's date : 02/04/2016

Filter on directives

orderby

This filter is use to order by column in the table.
<!DOCTYPE html>    
<html>    
<head>    
<meta charset="UTF-8">    
<title>Angular js</title>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    
<script>
  var app = angular.module('myApp', []);  
 app.controller('java2blogContoller', function($scope) {  
        
      $scope.countries=  
        [  
        {"name": "India" , "capital" : "delhi"},  
         {"name": "England" , "capital" : "London"},  
         {"name": "France" , "capital" : "Paris"},  
         {"name": "Japan" , "capital" : "Tokyo"}  
                 
      ];        
 });  
  
</script>        
</head>    
<body>    
<div ng-app="myApp" ng-controller="java2blogContoller">    
  <table border="1">  
    <thead>  
  <tr>  
     <th>Name</th>  
     <th>Captial</th>  
  </tr>  
 </thead>  
  <tr ng-repeat="con in countries | orderBy:'name'">  
    <td>{{ con.name }}</td>  
    <td>{{ con.capital }}</td>  
  </tr>  
</table>  
 </br>    

</div>    
</body>    
</html> 
Output:

Filter:

It is used to filter data from array or list

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="UTF-8">    
<title>Angular js</title>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    
<script>
  var app = angular.module('myApp', []);  
 app.controller('java2blogContoller', function($scope) {  
        
      $scope.countries=  
        [  
        {"name": "India" , "capital" : "delhi"},  
         {"name": "England" , "capital" : "London"},  
         {"name": "France" , "capital" : "Paris"},  
         {"name": "Japan" , "capital" : "Tokyo"}  
                 
      ];        
 });  
  
</script>    
    
</head>    
<body>    
  
<div ng-app="myApp" ng-controller="java2blogContoller">
     Filter : <input type = "text" ng-model = "country.name">
  </br>
    </br>
      <table border="1">  
    <thead>  
  <tr>  
     <th>Name</th>  
     <th>Captial</th>  
  </tr>  
 </thead>  
  
  <tr ng-repeat="con in countries | filter: country">  
    <td>{{ con.name }}</td>  
    <td>{{ con.capital }}</td>  
  </tr>  
</table> 
</div>
  
</body>    
</html>  
Output:
AngularJS filter example

Written by Arpit:

If you have read the post and liked it. Please connect with me on Facebook | Twitter | Google Plus

 

Java tutorial for beginners Copyright © 2012