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>