AngularJS - फिल्टर
डेटा को संशोधित करने के लिए फिल्टर का उपयोग किया जाता है। उन्हें पाइप (!) वर्ण का उपयोग करके अभिव्यक्ति या निर्देशों में क्लब किया जा सकता है। निम्न सूची आमतौर पर इस्तेमाल किए गए फ़िल्टर दिखाती है।
| अनु क्रमांक। | नाम और विवरण |
|---|---|
| 1 | uppercase एक टेक्स्ट को अपर केस टेक्स्ट में कनवर्ट करता है। |
| 2 | lowercase एक पाठ को निम्न केस पाठ में परिवर्तित करता है। |
| 3 | currency एक मुद्रा प्रारूप में पाठ प्रारूप। |
| 4 | filter उपलब्ध मानदंडों के आधार पर सरणी को इसके उप-भाग तक फ़िल्टर करें। |
| 5 | orderby उपलब्ध मानदंडों के आधार पर सरणी का आदेश देता है। |
अपरकेस फ़िल्टर
पाइप चरित्र का उपयोग करके एक अभिव्यक्ति के लिए अपरकेस फ़िल्टर जोड़ें। यहां हमने सभी बड़े अक्षरों में छात्र का नाम प्रिंट करने के लिए अपरकेस फ़िल्टर जोड़ा है।
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}}लोअरकेस फ़िल्टर
पाइप चरित्र का उपयोग करके एक अभिव्यक्ति में लोअरकेस फ़िल्टर जोड़ें। यहां हमने सभी लोअरकेस अक्षरों में छात्र का नाम प्रिंट करने के लिए लोअरकेस फ़िल्टर जोड़ा है।
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}मुद्रा फ़िल्टर
पाइप कैरेक्टर का उपयोग कर एक एक्सप्रेशन रिटर्न नंबर के लिए मुद्रा फ़िल्टर जोड़ें। यहां हमने मुद्रा प्रारूप का उपयोग करके शुल्क प्रिंट करने के लिए मुद्रा फ़िल्टर जोड़ा है।
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}फ़िल्टर
केवल आवश्यक विषयों को प्रदर्शित करने के लिए, हम फ़िल्टर के रूप में विषयनाम का उपयोग करते हैं।
Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>ऑर्डरबाय फिल्टर
अंकों द्वारा विषयों को क्रम में रखने के लिए, हम क्रम चिह्न का उपयोग करते हैं।
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>उदाहरण
निम्नलिखित उदाहरण उपरोक्त सभी फ़िल्टर का उपयोग दिखाता है।
testAngularJS.htm
<html>
<head>
<title>Angular JS Filters</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" 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 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>उत्पादन
वेब ब्राउज़र में फ़ाइल testAngularJS.htm खोलें । परिणाम देखें।