AngularJS Filters

Filters are used to modify data. They can be combined in expressions or directives using the pipe character (|). The following list shows commonly used filters.

Serial number	Name and description
1	`uppercase` Convert text to uppercase text.
2	`lowercase` Convert text to lowercase text.
3	`currency` Set text format in currency format.
4	`filter` Filter the array to form a subset of the array based on the provided conditions.
5	`orderby` Sort the array based on the provided conditions.

uppercase - Uppercase filter

Use the pipe character to add the uppercase filter to the expression. Here, we added the uppercase filter to print the student's name in all uppercase letters.

Input name:<input type = "text" ng-model = "student.firstName">
Input surname: <input type = "text" ng-model = "student.lastName">
Uppercase name: {{student.fullName() | uppercase}}

lowercase - Lowercase filter

Use the pipe character to add the lowercase filter to the expression. Here, we added the lowercase filter to print the student's name in all lowercase letters.

Input name:<input type = "text" ng-model = "student.firstName">
Input surname: <input type = "text" ng-model = "student.lastName">
Lowercase name: {{student.fullName() | lowercase}}

currency - Currency filter

Use the pipe character to add the currency filter to the expression that returns a number. Here, we added the currency filter to print the fee in currency format.

Input fee: <input type = "text" ng-model = "student.fees">fees: {{student.fees | currency}}

filter - Filter

To display only the necessary topics, we use subjectName as the filter.

Input topic: <input type = "text" ng-model = "subjectName">
Topic:
<ul>
　　　<li ng-repeat = "subject in student.subjects | filter: subjectName">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

orderby　- Filter

To sort the themes by marks, we use the orderBy filter.

Subject:
<ul>
　　　<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

Online Examples

The following examples show the usage of all the above filters.

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>Angular JS Filters</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Example of AngularJS Filters Usage</h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController">
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Name:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Surname:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.lastName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Cost:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.fees"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Theme:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "subjectName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　　　　<br/>
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Uppercase Name:</td><td>{{ student.fullName() | uppercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Lowercase Name:</td><td>{{ student.fullName() | lowercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Cost:</td><td>{{ student.fees | currency}}
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Theme:</td>
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　　　　<li ng-repeat = "subject in student.subjects | filter: subjectName | orderBy:'marks'">
　　　　　　　　　　　　　　　　　　　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {}}
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　fees:500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects:[
　　　　　　　　　　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　　　　　　　　　　{name:'Math',marks:65}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test and See‹/›

Output Results

Open the file in a web browsertestAngularJS.htm. View results.

AngularJS Tables AngularJS Controllers

AngularJS Basic Tutorial