AngularJS एनजी-रिपीट डायरेक्टिव विथ उदाहरण

विषय - सूची:

Anonim

बार-बार सूचना प्रदर्शित करना

कभी-कभी हमें दृश्य में आइटमों की एक सूची प्रदर्शित करने की आवश्यकता हो सकती है, इसलिए सवाल यह है कि हम अपने नियंत्रक में परिभाषित वस्तुओं की सूची को अपने दृश्य पृष्ठ पर कैसे प्रदर्शित कर सकते हैं।

कोणीय "एनजी-रिपीट" नामक एक निर्देश प्रदान करता है जिसका उपयोग हमारे नियंत्रक में दोहराए गए मूल्यों को प्रदर्शित करने के लिए किया जा सकता है।

आइए एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

Event Registration

Guru99 Global Event

Topics

  • {{tpname.name}}

कोड स्पष्टीकरण:

  1. कंट्रोलर में, हम सबसे पहले अपने एरो लिस्ट आइटम को परिभाषित करते हैं, जिसे हम व्यू में परिभाषित करना चाहते हैं। यहाँ पर हमने "TopicNames" नामक एक सरणी को परिभाषित किया है जिसमें तीन आइटम हैं। प्रत्येक आइटम में एक नाम-मूल्य जोड़ी होती है।
  2. टॉपिक्सनाम का सरणी तब "विषय" नामक एक सदस्य चर में जोड़ा जाता है और हमारी गुंजाइश वस्तु से जुड़ा होता है।
  3. हम अपने ऐरे में आइटमों की सूची प्रदर्शित करने के लिए
      (अनअॉर्डरेड लिस्ट) और
    • (लिस्ट आइटम) के HTML टैग्स का उपयोग कर रहे हैं। फिर हम अपने एरे में प्रत्येक आइटम के माध्यम से जाने के लिए एनजी-रिपीट निर्देश का उपयोग करते हैं। शब्द "tpname" एक वैरिएबल है जिसका उपयोग सरणी विषयों में प्रत्येक आइटम को इंगित करने के लिए किया जाता है।
    • इसमें हम प्रत्येक ऐरे आइटम का मान प्रदर्शित करेंगे।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा। आपको सरणी के सभी आइटम (मूल रूप से टॉपिकनाम इन टॉपिक्स) दिखाई देंगे।

आउटपुट:

एंगुलरज मल्टीपल कंट्रोलर्स

एक उन्नत नियंत्रक उदाहरण कोणीय जेएस अनुप्रयोग में कई नियंत्रक होने की अवधारणा होगी।

आप विभिन्न व्यावसायिक तर्क कार्यों को अलग करने के लिए कई नियंत्रकों को परिभाषित करना चाह सकते हैं। पहले हमने एक नियंत्रक में विभिन्न तरीकों के बारे में उल्लेख किया था जिसमें एक विधि में संख्याओं के जोड़ और घटाव के लिए अलग-अलग कार्यक्षमता थी। ठीक है, आपके पास तर्क के अधिक उन्नत पृथक्करण के लिए कई नियंत्रक हो सकते हैं। उदाहरण के लिए, आपके पास एक नियंत्रक हो सकता है जो केवल संख्याओं पर संचालन करता है और दूसरा जो तारों पर संचालन करता है।

आइए एक उदाहरण देखें कि हम कोणीय.जेएस एप्लिकेशन में कई नियंत्रकों को कैसे परिभाषित कर सकते हैं।

Event Registration

Guru99 Global Event

{{lname}}

कोड स्पष्टीकरण:

  1. यहां हम 2 नियंत्रकों को परिभाषित कर रहे हैं जिन्हें "फर्स्टकंट्रोलर" और "सेकंडकंट्रोलर" कहा जाता है। प्रत्येक नियंत्रक के लिए हम प्रसंस्करण के लिए कुछ कोड भी जोड़ रहे हैं। हमारे फर्स्टकंट्रोलर में, हम "pname" नामक एक वैरिएबल को अटैच करते हैं जिसका वैल्यू "फ़र्स्टकंट्रोलर" होता है, और दूसरे कॉन्ट्रोलर में हम "lname" नामक एक वैरिएबल देते हैं जिसका वैल्यू "सेकंडकंट्रोलर" होता है।
  2. दृश्य में, हम दोनों नियंत्रक तक पहुंच रहे हैं और दूसरे नियंत्रक से सदस्य चर का उपयोग कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा। आप उम्मीद के अनुसार "सेकंडकंट्रोलर" के सभी पाठ देखेंगे।

आउटपुट:

सारांश

  • एनजी-रिपीटर निर्देश का उपयोग कई दोहराई जाने वाली वस्तुओं को प्रदर्शित करने के लिए किया जा सकता है।
  • हमने एक उन्नत नियंत्रक पर भी नज़र डाली जो एक अनुप्रयोग में कई नियंत्रकों की परिभाषा को देखता था।