वेब पेज के साथ काम करते समय टेबल्स HTML में उपयोग किए जाने वाले सामान्य तत्वों में से एक हैं।
HTML में टेबल्स को HTML टैग का उपयोग करके बनाया गया है
<तालिका> टैग - यह तालिका प्रदर्शित करने के लिए उपयोग किया जाने वाला मुख्य टैग है।
- इस टैग का उपयोग तालिका के भीतर पंक्तियों को अलग करने के लिए किया जाता है।
- यह टैग वास्तविक तालिका डेटा प्रदर्शित करने के लिए उपयोग किया जाता है।
- इसका उपयोग टेबल हेडर डेटा के लिए किया जाता है।
AngularJS के साथ उपरोक्त उपलब्ध HTML टैग का उपयोग करके, हम तालिका डेटा को पॉप्युलेट करना आसान बना सकते हैं। संक्षेप में, एनजी-रिपीट निर्देश का उपयोग तालिका डेटा को भरने के लिए किया जाता है।
हम इस अध्याय के दौरान इसे कैसे प्राप्त करेंगे, इस पर गौर करेंगे। हम यह भी देखेंगे कि हम कोणीय तालिका अनुक्रमित प्रदर्शित करने के लिए $ इंडेक्स विशेषता का उपयोग करने के साथ-साथ ऑर्डरबी और अपरकेस फ़िल्टर का उपयोग कैसे कर सकते हैं।
इस ट्यूटोरियल में, आप सीखेंगे-
तालिका में डेटा को पॉप्युलेट और प्रदर्शित करें
AngularJS इन-बिल्ट फ़िल्टर
ऑर्डरबाय फिल्टर के साथ क्रमबद्ध तालिका
अपरकेस फ़िल्टर के साथ प्रदर्शन तालिका
तालिका सूचकांक ($ सूचकांक) प्रदर्शित करें
तालिका में डेटा को पॉप्युलेट और प्रदर्शित करें
जैसा कि हमने इस अध्याय के परिचय में चर्चा की है, एक HTML पृष्ठ में तालिका संरचना बनाने का आधार समान है।
तालिका की संरचना अभी भी
,
,
और
के सामान्य HTML टैग का उपयोग करके बनाई गई है। हालाँकि, डेटा AngularJS में एनजी-रिपीट निर्देश का उपयोग करके पॉपुलेटेड है।
आइए एक सरल उदाहरण देखें कि हम कोणीय तालिकाओं को कैसे लागू कर सकते हैं।
इस उदाहरण में,
हम एक कोणीय तालिका बनाने जा रहे हैं जिसमें उनके विवरण के साथ पाठ्यक्रम विषय होंगे।
चरण 1) हम पहली बार अपने HTML पृष्ठ पर "शैली" टैग जोड़ने जा रहे हैं ताकि तालिका को एक उचित तालिका के रूप में प्रदर्शित किया जा सके।
स्टाइल टैग HTML पेज में जोड़ा जाता है। यह एचटीएमएल तत्वों के लिए आवश्यक किसी भी स्वरूपण विशेषताओं को जोड़ने का मानक तरीका है।
हम अपनी तालिका में दो शैली मान जोड़ रहे हैं।
एक यह है कि हमारी कोणीय तालिका के लिए एक ठोस सीमा होनी चाहिए और
दूसरा यह है कि हमारे कोणीय तालिका डेटा के लिए जगह-जगह पेडिंग होनी चाहिए।
चरण 2) अगला चरण तालिका बनाने के लिए कोड लिखना है, और यह डेटा है।
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
कोड स्पष्टीकरण:
हम पहले "ट्यूटोरियल" नामक एक चर बना रहे हैं और इसे एक चरण में कुछ कुंजी-मूल्य जोड़े प्रदान कर रहे हैं। तालिका प्रदर्शित करते समय प्रत्येक कुंजी-मूल्य जोड़ी को डेटा के रूप में उपयोग किया जाएगा। ट्यूटोरियल चर को तब स्कोप ऑब्जेक्ट में असाइन किया जाता है ताकि इसे हमारे दृश्य से एक्सेस किया जा सके।
यह तालिका बनाने का पहला चरण है, और हम <तालिका> टैग का उपयोग करते हैं।
डेटा की प्रत्येक पंक्ति के लिए, हम "एनजी-रिपीट डायरेक्टिव" का उपयोग कर रहे हैं। यह निर्देश ट्युटो में प्रत्येक की-वैल्यू पेयर के माध्यम से जाता है, वैरिएबल पीटूटोर का उपयोग करके रियाल स्कोप ऑब्जेक्ट।
अंत में, हम कोणीय तालिका डेटा प्रदर्शित करने के लिए कुंजी-मान जोड़े (ptutor.Name और ptutor.Description) के साथ
टैग का उपयोग कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
उपरोक्त आउटपुट से,
हम देख सकते हैं कि तालिका नियंत्रक में परिभाषित कुंजी-मूल्य जोड़े के सरणी से डेटा के साथ ठीक से प्रदर्शित की गई है।
तालिका डेटा "एनजी-रिपीट निर्देश" का उपयोग करके प्रत्येक कुंजी-मूल्य वाले जोड़े के माध्यम से जाकर उत्पन्न किया गया था।
AngularJS इन-बिल्ट फ़िल्टर
तालिकाओं में डेटा प्रदर्शित करने के तरीके को बदलने के लिए AngularJS के भीतर इनबिल्ट फिल्टर का उपयोग करना बहुत आम है। हमने पहले ही अध्याय में कार्रवाई में फिल्टर देख चुके हैं। इससे पहले कि हम आगे बढ़ें, फ़िल्टर का त्वरित पुन: उपयोग करें।
Angular.JS फ़िल्टर में, उपयोगकर्ता को प्रदर्शित होने से पहले अभिव्यक्ति के मूल्य को प्रारूपित करने के लिए उपयोग किया जाता है। फ़िल्टर का एक उदाहरण 'अपरकेस' फ़िल्टर है जो एक स्ट्रिंग आउटपुट पर ले जाता है और स्ट्रिंग को प्रारूपित करता है और स्ट्रिंग के सभी वर्णों को अपरकेस के रूप में प्रदर्शित करता है।
इसलिए नीचे दिए गए उदाहरण में, यदि वैरिएबल 'TutorialName' का मान 'AngularJS' है, तो नीचे दिए गए एक्सप्रेशन का आउटपुट 'ANGULARJS' होगा।
{{तुरतियल नाम | अपरकेस }}
इस खंड में, हम यह देख रहे हैं कि कैसे ऑर्डरबी और अपरकेस फ़िल्टर टेबल में अधिक विस्तार से उपयोग किए जा सकते हैं।
ऑर्डरबाय फिल्टर के साथ क्रमबद्ध तालिका
यह फ़िल्टर तालिका स्तंभों में से किसी एक पर आधारित तालिका को सॉर्ट करने के लिए उपयोग किया जाता है। पिछले उदाहरण में, हमारे कोणीय तालिका डेटा का आउटपुट नीचे दिखाया गया है।
नियंत्रकों
कार्रवाई में नियंत्रित करने वाले
मॉडल
मॉडल और बाध्यकारी डेटा
निर्देशों
निर्देशों की लचीलापन
आइए एक उदाहरण देखें, कैसे हम "ऑर्डरबाय" फ़िल्टर का उपयोग कर सकते हैं और तालिका में पहले स्तंभ का उपयोग करके कोणीय तालिका डेटा को सॉर्ट कर सकते हैं।
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
कोड स्पष्टीकरण:
हम उसी तालिका का उपयोग कर रहे हैं जैसा हमने अपनी तालिका बनाने के लिए किया था, केवल इस बार अंतर यह है कि हम एनजी-रिपीट निर्देश के साथ "ऑर्डरबाय" फिल्टर का उपयोग कर रहे हैं। इस मामले में, हम कह रहे हैं कि हम कुंजी "नाम" द्वारा तालिका का आदेश देना चाहते हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
हम देख सकते हैं कि पहले कॉलम में डेटा के अनुसार कोणीय तालिका में डेटा को सॉर्ट किया गया है। हमारे डेटासेट में, "निर्देश" डेटा "मॉडल" डेटा से आता है, लेकिन क्योंकि हमने ऑर्डरबाय फ़िल्टर लागू किया है, टेबल तदनुसार क्रमबद्ध हो जाते हैं।
अपरकेस फ़िल्टर के साथ प्रदर्शन तालिका
हम बड़े तालिका में डेटा को अपरकेस में बदलने के लिए अपरकेस फ़िल्टर का भी उपयोग कर सकते हैं।
आइए एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
कोड स्पष्टीकरण:
हम अपनी तालिका बनाने के लिए समान कोड का उपयोग कर रहे हैं, केवल इस बार अंतर यह है कि हम अपरकेस फ़िल्टर का उपयोग कर रहे हैं। हम इस फ़िल्टर का उपयोग "ptutor.Name" के साथ मिलकर कर रहे हैं ताकि पहले कॉलम के सभी पाठ अपरकेस में प्रदर्शित हों।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
हम देख सकते हैं कि "अपरकेस" फ़िल्टर का उपयोग करके, पहले कॉलम के सभी डेटा अपरकेस वर्णों के साथ प्रदर्शित किए जाते हैं।
तालिका सूचकांक ($ सूचकांक) प्रदर्शित करें
टेबल इंडेक्स प्रदर्शित करने के लिए, $ इंडेक्स के साथ
जोड़ें।
आइए एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
कोड स्पष्टीकरण:
हम उसी तालिका का उपयोग कर रहे हैं जैसा हमने अपनी तालिका बनाने के लिए किया था, केवल इस बार अंतर यह है कि हम अपनी तालिका में एक अतिरिक्त पंक्ति जोड़ रहे हैं ताकि सूचकांक स्तंभ प्रदर्शित हो सके।
इस अतिरिक्त कॉलम में, हम AngularJS द्वारा प्रदान की गई "$ सूचकांक" संपत्ति का उपयोग कर रहे हैं और फिर प्रत्येक पंक्ति के लिए सूचकांक को बढ़ाने के लिए +1 ऑपरेटर का उपयोग कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
आप देख सकते हैं कि एक अतिरिक्त स्तंभ बनाया गया है। इस कॉलम में, हम प्रत्येक पंक्ति के लिए बनाए जा रहे इंडेक्स को देख सकते हैं।
सारांश:
HTML के भीतर उपलब्ध मानक टैग का उपयोग करके तालिका संरचनाएं बनाई जाती हैं। तालिका में डेटा "एनजी-रिपीट" निर्देश का उपयोग करके आबादी है।
ऑर्डरबाय फ़िल्टर का उपयोग तालिका के भीतर किसी भी कॉलम के आधार पर तालिका को सॉर्ट करने के लिए किया जा सकता है।
अपरकेस फ़िल्टर किसी भी टेक्स्ट-आधारित कॉलम में डेटा को अपरकेस में प्रदर्शित करने के लिए उपयोग किया जा सकता है।
"$ इंडेक्स" संपत्ति का उपयोग तालिका के लिए एक इंडेक्स बनाने के लिए किया जा सकता है।
AngularJS.JS तालिकाओं के साथ विकास के दौरान सामना किया गया एक सामान्य मुद्दा बड़े डेटासेट का कार्यान्वयन है जिसमें डेटा की 1000+ पंक्तियाँ हैं। कभी-कभी एनजी-रिपीट निर्देश गैर-उत्तरदायी बन सकता है, और इसलिए पूरा पृष्ठ कई बार अनुत्तरदायी हो जाता है। ऐसे मामले में, यह हमेशा बेहतर होता है कि कई पेजों में डेटा की पंक्तियाँ फैली हों।
