
Definition – Filters are used to change the format of data.
Types of Filters –There are 9 filters in AngularJS.
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
Syntax- data | filter
Example snippet- “abc |uppercase”
Now look on this code example- Which can be saved in html and open it on browser
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Filters Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John";
$scope.amount = 1234.56;
$scope.date = new Date();
$scope.names = [
{name:'John', country:'USA'},
{name:'Mary', country:'Canada'},
{name:'Lucy', country:'Australia'}
];
});
</script>
</head>
<body ng-controller="myCtrl">
<h2>AngularJS Filters Example</h2>
<p>Original name: {{name}}</p>
<p>Uppercase name: {{name | uppercase}}</p>
<p>Amount: {{amount | currency}}</p>
<p>Date: {{date | date:'MM/dd/yyyy'}}</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in names | orderBy:'name'">
<td>{{person.name | lowercase}}</td>
<td>{{person.country | uppercase}}</td>
</tr>
</tbody>
</table>
</body>
</html>