Various AngularJS Filters

AngularJS Filters alters the data and it can be implemented to directives and expressions by pipe character. Filters in AngularJS are –

  1. lowercase
  2. uppercase
  3. currency
  4. filter
  5. order by

1. lowercase

It is used to convert the text to the lower case text. It formats strings into lower case.
e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="Name='Intellipaat'">
<p>Name: {{ Name | lowercase }}</p>
</div>
</body>
</html>

Output
Name: intellipaat

2. uppercase

It is used to convert the text to theupper case text. It formats strings into upper case.
e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="Name='Intellipaat'">
<p>Name: {{ Name | uppercase }}</p>
</div>
</body>
</html>

Output
Name: INTELLIPAAT

3. currency

It formats a number to a currency format.
e.g. 

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" >
Salary: <input type="number" ng-model="salary">
<p>Total = {{salary | currency }}</p>
</div>
</body>
</html>

 Output
Salary: 100
Total = $100.00

Watch this TypeScript vs JavaScript Tutorial Video for Beginners:

AngularJS Filters

4. filter

It selects a subset of items from an array according to to the specified condition.
e.g.

<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app = "details" ng-controller = "studentController">
Enter subject: <input type = "text" ng-model = "subjectName">
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName ">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</div>
<script>
var details= angular.module("details", []);
details.controller('studentController', function($scope) {
$scope.student = {
subjects:[
{name:'English',marks:85},
{name:'Math',marks:90},
{name:'Physics',marks:80},
{name:'Chemistry',marks:75}
]
};
});
</script>
</body>
</html>

Output
output5

5. orderBy

It orders an array according to the specified condition. You can use orderBy as follows in the above application:
e.g.

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

Output
output6

Course Schedule

Name Date
Web Development Courses 2021-09-18 2021-09-19
(Sat-Sun) Weekend batch
View Details
Web Development Courses 2021-09-25 2021-09-26
(Sat-Sun) Weekend batch
View Details
Web Development Courses 2021-10-02 2021-10-03
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *