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 Various AngularJS Filters AngularJS Filters alters the data and it can be implemented to directives and expressions by pipe character. Filters in AngularJS are – lowercase uppercase currency filter order by   1. lowercase – It is used to convert the text to the lower case text. It formats strings


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

Recommended Videos

Leave a Reply

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