AngularJS Filters
Filters are used to modify the data. They can be clubbed in expression or directives using pipe (|) character. The following list shows the commonly used filters.
S.No.
Name
Description
1
uppercase
converts a text to upper case text.
2
lowercase
converts a text to lower case text.
3
currency
formats text in a currency format.
4
filter
filter the array to a subset of it based on provided criteria.
5
orderBy
orders the array based on provided criteria.
Uppercase Filter
Add uppercase filter to an expression using pipe character. Here we've added uppercase filter to print student name in all capital letters.
Enter first name:<input type="text"ng-model="student.firstName">
Enter last name: <input type="text"ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
Lowercase Filter
Add lowercase filter to an expression using pipe character. Here we've added lowercase filter to print student name in all lowercase letters.
Enter first name:<input type="text"ng-model="student.firstName">
Enter last name: <input type="text"ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}
Currency Filter
Add currency filter to an expression returning number using pipe character. Here we've added currency filter to print fees using currency format.
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
Filter
To display only required subjects, we usesubjectName as filter.
Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
<li ng-repeat="subject instudent.subjects | filter:subjectName">
{{ subject.name + ', marks:' +subject.marks }}
</li>
</ul>
OrderBy Filter
To order subjects by marks, we use orderBymarks.
Subject:
<ul>
<li ng-repeat="subject instudent.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' +subject.marks }}
</li>
</ul>
Example
The following example shows use of all the above mentioned filters.
testAngularJS.htm
<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees| currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
<li ng-repeat="subject instudent.subjects | filter: subjectName|orderBy:'marks'">
{{ subject.name + ', marks:' +subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script>
function studentController($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;
returnstudentObject.firstName + " " +studentObject.lastName;
}
};
}
</script>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Output
Open the file testAngularJS.htm in a web browser. See the result.
Angular Filter
ليست هناك تعليقات:
إرسال تعليق