AngularJS में फ़िल्टर क्या है?
AngularJS में एक फिल्टर मूल प्रारूप को बदलने के बिना उपयोगकर्ता को प्रदर्शित करने के लिए एक अभिव्यक्ति के मूल्य को प्रारूपित करने में मदद करता है। उदाहरण के लिए, यदि आप अपने स्ट्रिंग को लोअरकेस या अपरकेस में चाहते हैं, तो आप इसे फिल्टर का उपयोग करके कर सकते हैं। इसमें 'लोअरकेस', 'अपरकेस' जैसे बिल्ट-इन फिल्टर्स हैं, जो लोअरकेस और अपरकेस आउटपुट को फिर से प्राप्त कर सकते हैं।
इसी तरह, संख्याओं के लिए, आप अन्य फ़िल्टर का उपयोग कर सकते हैं।
इस ट्यूटोरियल के दौरान, हम कोणीय में उपलब्ध विभिन्न मानक निर्मित फ़िल्टर देखेंगे।
इस ट्यूटोरियल में, आप सीखेंगे-
- AngularJS में लोअरकेस फ़िल्टर
- AngularJS में अपरकेस फ़िल्टर
- AngularJS में नंबर फ़िल्टर
- AngularJS में करेंसी फ़िल्टर
- JSON फ़िल्टर AngularJS में
AngularJS में लोअरकेस फ़िल्टर
यह फ़िल्टर एक स्ट्रिंग आउटपुट पर ले जाता है और स्ट्रिंग को प्रारूपित करता है और स्ट्रिंग के सभी वर्णों को लोअरकेस के रूप में प्रदर्शित करता है।
आइए AngularJS tolowercase विकल्प के साथ AngularJS फ़िल्टर का एक उदाहरण देखें।
नीचे दिए गए उदाहरण में, हम गुंजाइश ऑब्जेक्ट के माध्यम से एक स्ट्रिंग को एक दृश्य में भेजने के लिए एक नियंत्रक का उपयोग करेंगे। हम स्ट्रिंग को लोअरकेस में बदलने के लिए दृश्य में एक फिल्टर का उपयोग करेंगे।
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
कोड स्पष्टीकरण:
- यहां हम एक स्ट्रिंग पास कर रहे हैं, जो "tutorialName" नामक एक सदस्य चर में लोअरकेस और अपरकेस वर्णों का एक संयोजन है और इसे गुंजाइश ऑब्जेक्ट में संलग्न करना है। पास किए जा रहे स्ट्रिंग का मान "AngularJS" है।
- हम सदस्य चर "tutorialName" का उपयोग कर रहे हैं और एक फिल्टर प्रतीक (!) लगा रहे हैं, जिसका अर्थ है कि आउटपुट को फ़िल्टर का उपयोग करके संशोधित करना होगा। हम तब लोअरकेस कीवर्ड का उपयोग करने के लिए बिल्ट-इन फ़िल्टर का उपयोग करने के लिए लोअरकेस में पूरे स्ट्रिंग को आउटपुट करने के लिए कहते हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से
- यह देखा जा सकता है कि स्ट्रिंग "एंगुलरजेएस" जो चर ट्यूटोरियलनाम में पारित किया गया था जो लोअरकेस और अपरकेस वर्णों का एक संयोजन था, निष्पादित किया गया है।
- निष्पादन के बाद, अंतिम आउटपुट लोअरकेस में है जैसा कि ऊपर दिखाया गया है।
AngularJS में अपरकेस फ़िल्टर
यह फ़िल्टर लोअरकेस फ़िल्टर के समान है; अंतर यह है कि एक स्ट्रिंग आउटपुट पर ले जाता है और स्ट्रिंग को प्रारूपित करता है और स्ट्रिंग के सभी वर्णों को अपरकेस के रूप में प्रदर्शित करता है।
आइए लोअरकेस विकल्प के साथ कैपिटल फ़िल्टर एंगुलरजेएस के एक उदाहरण को देखें।
नीचे के एंगुलरजेएस कैपिटल उदाहरण में, हम एक ऑब्जेक्ट का उपयोग करके स्कोप को ऑब्जेक्ट के दायरे में भेजेंगे। फिर हम स्ट्रिंग को अपरकेस में बदलने के लिए व्यू में एक फिल्टर का उपयोग करेंगे।
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
कोड स्पष्टीकरण:
- यहाँ हम एक स्ट्रिंग पास कर रहे हैं जो लोअरकेस और अपरकेस अक्षर "Angular JS" का एक संयोजन है जिसे "TutorialName" नामक एक सदस्य चर में दिया गया है और इसे स्कोप ऑब्जेक्ट में संलग्न किया गया है।
- हम सदस्य चर "tutorialName" का उपयोग कर रहे हैं और एक फ़िल्टर प्रतीक (!) लगा रहे हैं, जिसका अर्थ है कि आउटपुट को फ़िल्टर का उपयोग करके संशोधित करना होगा। फिर हम अपरकेस में पूरे स्ट्रिंग को आउटपुट करने के लिए बिल्ट-इन फ़िल्टर का उपयोग करने के लिए अपरकेस कीवर्ड का उपयोग करते हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि स्ट्रिंग जिसे चर ट्यूटोरियलनाम में पारित किया गया था जो लोअरकेस और अपरकेस वर्णों का एक संयोजन था, सभी अपरकेस में आउटपुट किया गया है।
AngularJS में नंबर फ़िल्टर
यह फ़िल्टर एक संख्या को प्रारूपित करता है और एक संख्या के लिए दशमलव बिंदुओं के लिए एक सीमा लागू कर सकता है।
आइए संख्या विकल्प के साथ AngularJS फ़िल्टर का एक उदाहरण देखें।
नीचे दिए गए उदाहरण में,
हम यह दिखाना चाहते थे कि हम 2 दशमलव स्थानों के प्रतिबंध के साथ संख्या को प्रारूपित करने के लिए संख्या फ़िल्टर का उपयोग कैसे कर सकते हैं।
हम स्कोप को ऑब्जेक्ट के माध्यम से व्यू में नंबर भेजने के लिए कंट्रोलर का उपयोग करेंगे। फिर हम नंबर फ़िल्टर लागू करने के लिए दृश्य में एक फिल्टर का उपयोग करेंगे।
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
कोड स्पष्टीकरण:
- यहाँ हम एक संख्या में दशमलव स्थानों के साथ एक सदस्य चर में एक संख्या पारित कर रहे हैं जिसे ट्यूटोरियलआईडी कहा जाता है और इसे स्कोप ऑब्जेक्ट में संलग्न किया जाता है।
- हम नंबर चर के साथ सदस्य चर ट्यूटोरियलआईडी का उपयोग कर रहे हैं और एक फिल्टर प्रतीक (!) लगा रहे हैं। अब संख्या: 2 में, दो इंगित करते हैं कि फ़िल्टर को दशमलव स्थानों की संख्या 2 तक सीमित करना चाहिए।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि चर ट्यूटोरियल में जो संख्या थी, जो दशमलव अंकों की एक बड़ी संख्या थी, वह संख्या 2 दशमलव स्थानों तक सीमित हो गई है: 2 फ़िल्टर जो लागू किया गया था।
AngularJS में करेंसी फ़िल्टर
यह फ़िल्टर एक मुद्रा फ़िल्टर को एक संख्या में प्रारूपित करता है।
मान लीजिए, यदि आप किसी मुद्रा के साथ $ जैसी संख्या प्रदर्शित करना चाहते हैं, तो इस फ़िल्टर का उपयोग किया जा सकता है।
नीचे दिए गए उदाहरण में हम गुंजाइश ऑब्जेक्ट के माध्यम से किसी दृश्य को संख्या भेजने के लिए एक नियंत्रक का उपयोग करेंगे। हम वर्तमान फ़िल्टर को लागू करने के लिए दृश्य में फ़िल्टर का उपयोग करेंगे।
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
कोड स्पष्टीकरण:
- यहां हम एक संख्या में एक सदस्य चर को पास कर रहे हैं जिसे ट्यूटोरियलप्राइसिस कहा जाता है और इसे स्कोप ऑब्जेक्ट में संलग्न किया जाता है।
- हम मुद्रा चर के साथ सदस्य चर ट्यूटोरियलप्रिंट का उपयोग कर रहे हैं और एक फिल्टर प्रतीक (!) लगा रहे हैं। ध्यान दें कि जो मुद्रा लागू होती है वह भाषा सेटिंग्स पर निर्भर करती है जो मशीन पर लागू होती है।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से
- यह देखा जा सकता है कि मुद्रा चिन्ह को उस संख्या में जोड़ा गया है जो कि वैरिएबल ट्युट्रिप्रिस में दी गई थी।
- हमारे मामले में, चूंकि भाषा सेटिंग्स अंग्रेजी (संयुक्त राज्य) हैं, इसलिए $ प्रतीक को मुद्रा के रूप में डाला जाता है।
JSON फ़िल्टर AngularJS में
यह फ़िल्टर JSON को इनपुट की तरह प्रारूपित करता है और JSON में आउटपुट देने के लिए AngularJS JSON फ़िल्टर लागू करता है।
नीचे दिए गए उदाहरण में हम JSON टाइप ऑब्जेक्ट को स्कोप ऑब्जेक्ट के माध्यम से किसी व्यू में भेजने के लिए कंट्रोलर का उपयोग करेंगे। हम तब JSON फ़िल्टर लागू करने के लिए दृश्य में फ़िल्टर का उपयोग करेंगे।
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
कोड स्पष्टीकरण:
- यहां हम एक सदस्य को "ट्यूटोरियल" नामक चर में पास कर रहे हैं और इसे स्कोप ऑब्जेक्ट में संलग्न कर रहे हैं। इस सदस्य चर में ट्यूटोरियल आईडी: 12, और ट्यूटोरियलनाम का एक JSON प्रकार स्ट्रिंग शामिल है: "कोणीय"।
- हम JSON फिल्टर के साथ सदस्य चर ट्यूटोरियल का उपयोग कर रहे हैं और एक फिल्टर प्रतीक (!) लगा रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- यह देखा जा सकता है कि स्ट्रिंग की तरह JSON को पार्स किया जाता है और ब्राउज़र में एक उचित JSON ऑब्जेक्ट प्रदर्शित किया जाता है।
सारांश:
- फ़िल्टर का उपयोग उपयोगकर्ता को आउटपुट प्रदर्शित करने के तरीके को बदलने के लिए किया जाता है।
- कोणीय क्रमशः निचले और अपरकेस के लिए आउटपुट को बदलने के लिए लोअरकेस और अपरकेस फिल्टर जैसे बिल्ट-इन फिल्टर प्रदान करता है।
- संख्या को प्रदर्शित करने के लिए दशमलव बिंदुओं की संख्या निर्दिष्ट करके संख्या फ़िल्टर का उपयोग करके तरीके प्रदर्शित करने का भी प्रावधान है।
- मुद्रा चिह्न को किसी भी संख्या में जोड़ने के लिए मुद्रा फ़िल्टर का उपयोग भी किया जा सकता है।
- यदि json विशिष्ट आउटपुट की आवश्यकता है, तो कोणीय भी JSON को स्ट्रिंग में JSON प्रारूप में फ़िल्टर करने के लिए JSON फ़िल्टर प्रदान करता है।