Filters In Angular

Filters are used to change or modify the data. These can be clubbed in expression or directives using pipe (|) character.

A list of some common filters and their usage is given below.

Filter Name	Description
Uppercase	converts a text to uppercase text.
Lowercase	converts a text to lowercase text.
Currency	formats text in currency format.
Filter	filter the array to a subset of it based on certain conditions.
Orderby	Orders the array based on certain conditions.
Date	Format a date to a specified format.
Json	Format an object to a JSON String.
Number	Format number to a string.
LimitTo	Limits an array or string into a specified number of elements or characters.

1. Example of Uppercase and Lowercase filters.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<title></title>
<meta charset="utf-8" /> </head>
<body>
<div ng-controller="MyCtrl"> My Name is {{firstName|uppercase}} {{lastName|lowercase}} </div>
<script>
var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope) {
$scope.firstName = "Rohit",
$scope.lastName = "Singh"
});
</script>
</body>
</html>

Output

My Name is ROHIT singh.

2. Example of Currency filter.

Output

Salary entered by you is: $145.00.

3. Example of Custom Filter.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<title></title>
<meta charset="utf-8" /> </head>
<body>
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="name in names | filter:'y'"> {{name}} </li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope) {
$scope.names = ['Ankush', 'Vinay', 'Saurav', 'Sandeep', 'Gaurav', 'Sanjay', 'Akshay', ];
});
</script>
</body>
</html>