Objectives and outcomes

In this tutorial we are going to learn about angular-js filters. Filters are used to format and modify application data. Various angular-js filters are uppercase, lowercase, filter, currency, orderBy etc.Example for the same is shown below. Filter are used after placing pipe character '|'.



Javascript

<script>
var myapp = angular.module('comm',[]);
myapp.controller('quantcontrol',function($scope){
$scope.str1 = 'codeshot.in';
$scope.str2 = 'HELLO WORLD';
$scope.fees = 500;
$scope.names = ['Alfred','Joseph','Tony'];
$scope.utility = [{name:'chair',quantity:10},{name:'Table',quantity:8},{name:'Almirah',quantity:3}];
});
</script>


HTML code:

<html>
<head>
<meta charset="utf-8">
<title>AngularJS Filters</title>
<script src="angular-1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="comm" ng-controller="quantcontrol">
<p>Uppercase filter: {{str1 | uppercase}}<br/>

Lowercase filter: {{str2 | lowercase}}<br/>

Currency filter: {{fees * 5 | currency}}<br/>

<ul>
<li ng-repeat="person in names | filter: 'o'">
{{person}}</li>
</ul><br/>

<ul>
<li ng-repeat="commodity in utility | orderBy:'quantity'">
{{commodity.name + ', quantity: ' + commodity.quantity}}</li><br/>
</p>
</div>
</body>
</html>


Uppercase filter: {{str1 | uppercase}}
Lowercase filter: {{str2 | lowercase}}
Currency filter: {{fees * 5 | currency}}

  • {{person}}

  • {{commodity.name + ', quantity: ' + commodity.quantity}}



Note: filter filter is used only with arrays. As we have used in above example where filter:'o' depicts that only those string will be displayed from the array which consist of character 'o'. In the utility array we have displayed the commodity with respect to ascending order of their quantity.