AngularJS Filters

1.What is Angular Js Filters?

Angular Js provide filters to transform data.

 

The commonly used filters are:

Uppercase: It will convert text into uppercase.

Lowercase: It will convert text into lowercase.

Currency: It will format numbers into currency.

Filters: It will filter the array from subset based on criteria.

Order by: It will order the array based on criteria.

 

2. What is a uppercase filter?

The uppercase filter will convert text into uppercase text. We can add upper case filters and lowercase filters to expression by using pipe '|'.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myController">
<p>The person Name is {{ firstName | uppercase }}</p>
</div>

<script>
angular.module('myFirstApp', []).
controller('myController', function($scope){
$scope.firstName = "ABC",
$scope.lastName = "Learn"});
</script>
</body>
</html>

 

3.What is lower case?

The Lowercase filter will convert text into lowercase text.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com
/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myController">
<p>The person Name is {{ lastName | lowercase }}</p>
</div>

<script>
angular.module('myFirstApp', []).
controller('myController', function($scope){
$scope.firstName = "ABC",
$scope.lastName = "Learn"});
</script>
</body>
</html>

 

4.What is currency filter?

Currency Filters format numbers into currency.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myCostController">
<h2>Price: {{ cost | currency}}</h2>

</div>

<script>
var myFirstApp= angular.module('myFirstApp', []);
myFirstApp.controller('myCostController', 
function($scope) {
    $scope.cost = '100';
});
</script>
</body>
</html>

 

5. What is filter Filter?

The filter Filter will filter the array from subset based on criteria.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="mynamesController">
<ul>
  <li ng-repeat="y  in names | filter : 'i'">
    {{ y }}
  </li>
</ul>

</div>

<script>
angular.module('myFirstApp', []).
controller('mynamesController', function($scope) {
    $scope.names = [
        'ram',
        'krishna',
        'amar',
        'akhil',
        'pavan',
        'abhi'
    ];
});
</script>
</body>
</html>

 

6. What is an order filter?

Order filters will order the array based on criteria.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com
/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="mynamesController">
<ul>
  <li ng-repeat="y  in names | orderBy : 'state'">
    {{ y.name +',' +y.state }}
  </li>
</ul>

</div>

<script>
angular.module('myFirstApp', []).
controller('mynamesController', function($scope) {
    $scope.names = [
        {name:'ram',state:'A.p'},
        {name:'krishna',state:'Karnataka'},
        {name:'amar',state:'Tamil nadu'},
        {name:'akhil',state:'Delhi'},
        {name:'pavan',state:'Goa'},
        {name:'abhi',state:'Orissa'}
    ];
});
</script>
<p>In this example order based on states.</p>
</body>
</html>