AngularJS फ़िल्टर और AngularJS कस्टम फ़िल्टर उदाहरण के साथ
जेम्स हार्टमैन
AngularJS में फ़िल्टर क्या है?
A AngularJS में फ़िल्टर करें मूल प्रारूप को बदले बिना उपयोगकर्ता को प्रदर्शित करने के लिए अभिव्यक्ति के मान को प्रारूपित करने में मदद करता है। उदाहरण के लिए, यदि आप अपनी स्ट्रिंग को लोअरकेस या अपरकेस में चाहते हैं, तो आप फ़िल्टर का उपयोग करके ऐसा कर सकते हैं। 'लोअरकेस', 'अपरकेस' जैसे बिल्ट-इन फ़िल्टर हैं, जो तदनुसार लोअरकेस और अपरकेस आउटपुट प्राप्त कर सकते हैं।
AngularJS कस्टम फ़िल्टर
कभी-कभी Angular में बिल्ट-इन फ़िल्टर आउटपुट फ़िल्टर करने की ज़रूरतों या आवश्यकताओं को पूरा नहीं कर पाते हैं। ऐसे मामले में, AngularJS कस्टम फ़िल्टर बनाया जा सकता है, जो आउटपुट को आवश्यक तरीके से पास कर सकता है।
इसी तरह, संख्याओं के लिए, आप अन्य फ़िल्टर का उपयोग कर सकते हैं। इस ट्यूटोरियल के दौरान, हम Angular में उपलब्ध विभिन्न मानक बिल्ट-इन फ़िल्टर देखेंगे।
AngularJS में कस्टम फ़िल्टर कैसे बनाएं
नीचे दिए गए कस्टम फ़िल्टर AngularJS उदाहरण में, हम स्कोप ऑब्जेक्ट के माध्यम से कंट्रोलर से दृश्य में एक स्ट्रिंग पास करने जा रहे हैं, लेकिन हम नहीं चाहते कि स्ट्रिंग को उसी रूप में प्रदर्शित किया जाए।
हम यह सुनिश्चित करना चाहते हैं कि जब भी हम स्ट्रिंग प्रदर्शित करें, हम एक कस्टम फ़िल्टर पास करेंगे AngularJS, जो एक अन्य स्ट्रिंग को जोड़ेगा और उपयोगकर्ता को पूर्ण स्ट्रिंग प्रदर्शित करेगा।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.filter('Demofilter',function(){
return function(input)
{
return input + " Tutorial"
}
});
app.controller('DemoController',function($scope){
$scope.tutorial ="Angular";
});
</script>
</body>
</html>
कोड स्पष्टीकरण
- यहां हम ट्यूटोरियल नामक सदस्य चर में एक स्ट्रिंग "एंगुलर" पास कर रहे हैं और इसे स्कोप ऑब्जेक्ट से जोड़ रहे हैं।
- एंगुलर फ़िल्टर सेवा प्रदान करता है जिसका उपयोग हमारे कस्टम फ़िल्टर बनाने के लिए किया जा सकता है। 'डेमोफ़िल्टर' हमारे फ़िल्टर को दिया गया नाम है।
- यह AngularJS में कस्टम फ़िल्टर परिभाषित करने का मानक तरीका है जिसमें एक फ़ंक्शन लौटाया जाता है। यह फ़ंक्शन वह है जिसमें कस्टम फ़िल्टर बनाने के लिए कस्टम कोड होता है। हमारे फ़ंक्शन में, हम एक स्ट्रिंग “Angular” ले रहे हैं जिसे हमारे दृश्य से फ़िल्टर में पास किया जाता है और इसमें स्ट्रिंग “Tutorial” जोड़ रहे हैं।
- हम अपने सदस्य चर पर डेमोफिल्टर का उपयोग कर रहे हैं जिसे नियंत्रक से दृश्य में पारित किया गया था।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि हमारा कस्टम फ़िल्टर लागू कर दिया गया है और
- शब्द 'ट्यूटोरियल' को स्ट्रिंग के अंत में जोड़ा गया है, जिसे सदस्य चर ट्यूटोरियल में पास किया गया था।
AngularJS में लोअरकेस फ़िल्टर
यह फ़िल्टर एक स्ट्रिंग आउटपुट लेता है और स्ट्रिंग को फ़ॉर्मेट करता है तथा स्ट्रिंग के सभी अक्षरों को लोअरकेस में प्रदर्शित करता है।
आइए AngularJS टू लोअरकेस विकल्प के साथ AngularJS फ़िल्टर का एक उदाहरण देखें।
नीचे दिए गए उदाहरण में, हम स्कोप ऑब्जेक्ट के माध्यम से एक स्ट्रिंग को व्यू में भेजने के लिए एक कंट्रोलर का उपयोग करेंगे। फिर हम स्ट्रिंग को लोअरकेस में बदलने के लिए व्यू में एक फ़िल्टर का उपयोग करेंगे।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName | lowercase}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialName ="Angular JS";
});
</script>
</body>
</html>
कोड स्पष्टीकरण
- यहाँ हम एक स्ट्रिंग पास कर रहे हैं, जो कि “tutorialName” नामक सदस्य चर में लोअरकेस और अपरकेस वर्णों का संयोजन है और इसे स्कोप ऑब्जेक्ट से जोड़ रहे हैं। पास की जा रही स्ट्रिंग का मान “AngularJS” है।
- हम सदस्य चर "tutorialName" का उपयोग कर रहे हैं और एक फ़िल्टर प्रतीक (|) डाल रहे हैं जिसका अर्थ है कि आउटपुट को फ़िल्टर का उपयोग करके संशोधित करने की आवश्यकता है। फिर हम लोअरकेस कीवर्ड का उपयोग करके कहते हैं कि संपूर्ण स्ट्रिंग को लोअरकेस में आउटपुट करने के लिए बिल्ट-इन फ़िल्टर का उपयोग करें।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से
- यह देखा जा सकता है कि स्ट्रिंग “AngularJS” जिसे ट्यूटोरियलनेम वेरिएबल में पास किया गया था, जो लोअरकेस और अपरकेस अक्षरों का संयोजन था, निष्पादित किया गया है।
- निष्पादन के बाद, अंतिम आउटपुट लोअरकेस में होता है जैसा कि ऊपर दिखाया गया है।
AngularJS में अपरकेस फ़िल्टर
यह फिल्टर लोअरकेस फिल्टर के समान है; अंतर यह है कि यह एक स्ट्रिंग आउटपुट लेता है और स्ट्रिंग को फॉर्मेट करता है तथा स्ट्रिंग के सभी अक्षरों को अपरकेस में प्रदर्शित करता है।
आइए, लोअरकेस विकल्प के साथ AngularJS के कैपिटलाइज़ फ़िल्टर का एक उदाहरण देखें।
नीचे दिए गए AngularJS कैपिटलाइज़ उदाहरण में, हम स्कोप ऑब्जेक्ट के माध्यम से एक स्ट्रिंग को व्यू में भेजने के लिए एक कंट्रोलर का उपयोग करेंगे। फिर हम स्ट्रिंग को अपरकेस में बदलने के लिए व्यू में एक फ़िल्टर का उपयोग करेंगे।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName | uppercase}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialName ="Angular JS";
});
</script>
</body>
</html>
कोड स्पष्टीकरण
- यहां हम एक स्ट्रिंग पास कर रहे हैं जो लोअरकेस और अपरकेस अक्षरों का संयोजन है “Angular JS” “tutorialName” नामक सदस्य चर में और इसे स्कोप ऑब्जेक्ट से जोड़ रहे हैं।
- हम सदस्य चर “tutorialName” का उपयोग कर रहे हैं और फ़िल्टर प्रतीक (|) डाल रहे हैं, जिसका अर्थ है कि आउटपुट को फ़िल्टर का उपयोग करके संशोधित करने की आवश्यकता है। फिर हम अपरकेस कीवर्ड का उपयोग करके कहते हैं कि संपूर्ण स्ट्रिंग को अपरकेस में आउटपुट करने के लिए बिल्ट-इन फ़िल्टर का उपयोग करें।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि ट्यूटोरियलनेम वेरिएबल में जो स्ट्रिंग पास की गई थी, जो लोअरकेस और अपरकेस अक्षरों का संयोजन थी, उसे सभी अपरकेस में आउटपुट किया गया है।
AngularJS में संख्या फ़िल्टर
यह फ़िल्टर किसी संख्या को प्रारूपित करता है और किसी संख्या के लिए दशमलव बिंदु पर सीमा लागू कर सकता है.
आइए नंबर विकल्प के साथ AngularJS फ़िल्टर का एक उदाहरण देखें।
नीचे दिए गए उदाहरण में,
हम यह दिखाना चाहते थे कि कैसे हम संख्या फिल्टर का उपयोग करके किसी संख्या को 2 दशमलव स्थानों के प्रतिबंध के साथ प्रदर्शित करने के लिए प्रारूपित कर सकते हैं।
हम स्कोप ऑब्जेक्ट के ज़रिए व्यू में नंबर भेजने के लिए कंट्रोलर का इस्तेमाल करेंगे। फिर हम नंबर फ़िल्टर लागू करने के लिए व्यू में फ़िल्टर का इस्तेमाल करेंगे।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialID =3.565656;
});
</script>
</body>
</html>
कोड स्पष्टीकरण
- यहां हम ट्यूटोरियलआईडी नामक सदस्य चर में बड़ी संख्या में दशमलव स्थानों वाली संख्या पास कर रहे हैं और इसे स्कोप ऑब्जेक्ट से जोड़ रहे हैं।
- हम सदस्य चर ट्यूटोरियलआईडी का उपयोग कर रहे हैं और संख्या फ़िल्टर के साथ एक फ़िल्टर प्रतीक (|) डाल रहे हैं। अब संख्या: 2 में, दो इंगित करता है कि फ़िल्टर को दशमलव स्थानों की संख्या को 2 तक सीमित करना चाहिए।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि ट्यूटोरियलआईडी चर में जो संख्या पास की गई थी, जिसमें बड़ी संख्या में दशमलव बिंदु थे, उसे संख्या: 2 फिल्टर के कारण 2 दशमलव स्थानों तक सीमित कर दिया गया है।
AngularJS में मुद्रा फ़िल्टर
यह फ़िल्टर मुद्रा फ़िल्टर को संख्या में स्वरूपित करता है.
मान लीजिए, यदि आप किसी संख्या को $ जैसी मुद्रा के साथ प्रदर्शित करना चाहते हैं, तो इस फ़िल्टर का उपयोग किया जा सकता है।
नीचे दिए गए उदाहरण में, हम स्कोप ऑब्जेक्ट के माध्यम से व्यू में एक नंबर भेजने के लिए कंट्रोलर का उपयोग करेंगे। फिर हम वर्तमान फ़िल्टर को लागू करने के लिए व्यू में फ़िल्टर का उपयोग करेंगे।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialprice =20.56;
});
</script>
</body>
</html>
कोड स्पष्टीकरण
- यहां हम ट्यूटोरियलप्राइस नामक सदस्य चर में एक संख्या पास कर रहे हैं और इसे स्कोप ऑब्जेक्ट से जोड़ रहे हैं।
- हम सदस्य चर ट्यूटोरियलप्राइस का उपयोग कर रहे हैं और मुद्रा फ़िल्टर के साथ एक फ़िल्टर प्रतीक (|) डाल रहे हैं। ध्यान दें कि जो मुद्रा लागू की जाती है वह मशीन पर लागू भाषा सेटिंग्स पर निर्भर करती है।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से
- यह देखा जा सकता है कि मुद्रा प्रतीक को उस संख्या में जोड़ा गया है जिसे ट्यूटोरियलप्राइस चर में पारित किया गया था।
- हमारे मामले में, चूंकि भाषा सेटिंग अंग्रेजी (संयुक्त राज्य अमेरिका) है, इसलिए $ प्रतीक को मुद्रा के रूप में डाला गया है।
AngularJS में JSON फ़िल्टर
यह फ़िल्टर प्रारूपित करता है JSON इनपुट को पसंद करता है और JSON में आउटपुट देने के लिए AngularJS JSON फ़िल्टर लागू करता है।
नीचे दिए गए उदाहरण में, हम JSON प्रकार की ऑब्जेक्ट को स्कोप ऑब्जेक्ट के माध्यम से व्यू में भेजने के लिए कंट्रोलर का उपयोग करेंगे। फिर हम JSON फ़िल्टर लागू करने के लिए व्यू में फ़िल्टर का उपयोग करेंगे।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
});
</script>
</body>
</html>
कोड स्पष्टीकरण
- यहाँ हम "ट्यूटोरियल" नामक सदस्य चर में एक संख्या पास कर रहे हैं और इसे स्कोप ऑब्जेक्ट से जोड़ रहे हैं। इस सदस्य चर में ट्यूटोरियल आईडी:12, और ट्यूटोरियलनाम: "एंगुलर" की JSON प्रकार की स्ट्रिंग शामिल है।
- हम सदस्य चर ट्यूटोरियल का उपयोग कर रहे हैं और JSON फ़िल्टर के साथ एक फ़िल्टर प्रतीक (|) डाल रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि JSON को एक स्ट्रिंग की तरह पार्स किया जाता है और ब्राउज़र में एक उचित JSON ऑब्जेक्ट प्रदर्शित किया जाता है।
सारांश
- फ़िल्टर का उपयोग उपयोगकर्ता को आउटपुट प्रदर्शित करने के तरीके को बदलने के लिए किया जाता है।
- एंगुलर, स्ट्रिंग्स के आउटपुट को क्रमशः लोअरकेस और अपरकेस में बदलने के लिए लोअरकेस और अपरकेस फिल्टर जैसे अंतर्निर्मित फिल्टर प्रदान करता है।
- संख्या में प्रदर्शित किए जाने वाले दशमलव बिंदुओं की संख्या निर्दिष्ट करके संख्या फिल्टर का उपयोग करके संख्याओं को प्रदर्शित करने के तरीके को बदलने का भी प्रावधान है।
- किसी भी संख्या में मुद्रा प्रतीक जोड़ने के लिए मुद्रा फिल्टर का भी उपयोग किया जा सकता है।
- यदि JSON विशिष्ट आउटपुट की आवश्यकता है, तो कोणीय JSON प्रारूप में किसी भी JSON जैसे स्ट्रिंग को फ़िल्टर करने के लिए JSON फ़िल्टर भी प्रदान करता है।
- यदि कोई आवश्यकता है जो एंगुलर में परिभाषित किसी भी फिल्टर द्वारा पूरी नहीं होती है, तो आप अपना कस्टम फ़िल्टर बना सकते हैं और फ़िल्टर से इच्छित आउटपुट के प्रकार को निर्धारित करने के लिए अपना कस्टम कोड जोड़ सकते हैं।