EXAMPLES के साथ AngularJS में 'एनजी-मॉडल' का उपयोग कैसे करें

AngularJs में एनजी-मॉडल क्या है?

एनजी-मॉडल Angular.JS में एक निर्देश है जो मॉडल का प्रतिनिधित्व करता है और इसका प्राथमिक उद्देश्य "दृश्य" को "मॉडल" से बांधना है।

उदाहरण के लिए, मान लीजिए कि आप नीचे दिखाए गए उपयोगकर्ता की तरह एक साधारण पृष्ठ प्रस्तुत करना चाहते थे, जो उपयोगकर्ता को टेक्स्टबॉक्स में "प्रथम नाम" और "अंतिम नाम" दर्ज करने के लिए कहता है। और फिर आप यह सुनिश्चित करना चाहते थे कि आप अपने डेटा मॉडल में उपयोगकर्ता द्वारा दर्ज की गई जानकारी संग्रहीत करें।

आप अपने डेटा मॉडल को "पहले नाम" और "अंतिम नाम" के पाठ बॉक्स क्षेत्रों को मैप करने के लिए एनजी-मॉडल निर्देश का उपयोग कर सकते हैं।

एनजी-मॉडल निर्देश यह सुनिश्चित करेगा कि "दृश्य" और आपके "मॉडल" के डेटा को पूरे समय सिंक में रखा जाए।

इस ट्यूटोरियल में, आप सीखेंगे-

• एनजी मॉडल विशेषता
• एनजी-मॉडल का उपयोग कैसे करें
• पाठ क्षेत्र
• इनपुट तत्व
• तत्व रूप ड्रॉपडाउन चुनें

एनजी-मॉडल विशेषता

जैसा कि इस अध्याय के परिचय में चर्चा की गई है, एनजी-मॉडल विशेषता का उपयोग उपयोगकर्ता को प्रस्तुत किए गए दृश्य में आपके मॉडल में डेटा को बांधने के लिए किया जाता है।

एनजी-मॉडल विशेषता के लिए प्रयोग किया जाता है,

1. बाइंडिंग नियंत्रण जैसे इनपुट, टेक्स्ट क्षेत्र और मॉडल में दृश्य में चयन करता है।
2. एक सत्यापन व्यवहार प्रदान करें - उदाहरण के लिए, एक सत्यापन एक पाठ बॉक्स में जोड़ा जा सकता है जो केवल संख्यात्मक वर्ण पाठ बॉक्स में दर्ज किया जा सकता है।
3. एनजी-मॉडल विशेषता नियंत्रण की स्थिति को बनाए रखती है (राज्य द्वारा, हमारा मतलब है कि नियंत्रण और डेटा को सिंक में रखा जाना बाध्य है। यदि हमारे डेटा का मूल्य बदलता है, तो यह स्वचालित रूप से नियंत्रण में मूल्य बदल देगा। विपरीतता से)

एनजी-मॉडल का उपयोग कैसे करें

1) पाठ क्षेत्र

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

तो अब एक सरल उदाहरण देखते हैं कि हम एनजी-मॉडल निर्देश को एक पाठ क्षेत्र नियंत्रण में कैसे जोड़ सकते हैं।

इस उदाहरण में, हम यह दिखाना चाहते हैं कि हम नियंत्रक से मल्टीलाइन स्ट्रिंग को कैसे दृश्य में पास कर सकते हैं और उस मान को पाठ क्षेत्र नियंत्रण से जोड़ सकते हैं।

Guru99 Global Event
   Topic Description:

   

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

1. एनजी मॉडल के निर्देश "पाठ क्षेत्र" नियंत्रण करने के लिए "pDescription" कहा जाता सदस्य चर संलग्न करने के लिए प्रयोग किया जाता है।

   "PDescription" वेरिएबल में वास्तव में टेक्स्ट होगा, जिसे टेक्स्ट एरिया कंट्रोल में पास किया जाएगा। हमने textarea नियंत्रण के लिए 2 विशेषताओं का भी उल्लेख किया है जो पंक्तियों = 4 और कर्ल्स = 50 है। इन विशेषताओं का उल्लेख किया गया है ताकि हम पाठ की कई पंक्तियों को दिखा सकें। इन विशेषताओं को परिभाषित करने से textarea में अब 4 पंक्तियाँ और 50 कॉलम होंगे ताकि यह पाठ की कई पंक्तियों को दिखा सके।
2. यहां हम सदस्य चर को "pDescription" नामक स्कोप ऑब्जेक्ट से जोड़ रहे हैं और वेरिएबल को एक स्ट्रिंग वैल्यू डाल रहे हैं।
3. ध्यान दें कि हम स्ट्रिंग में / n शाब्दिक रूप से डाल रहे हैं ताकि पाठ पाठ क्षेत्र में प्रदर्शित होने पर कई पंक्तियों का हो सके। / N शाब्दिक पाठ को कई लाइनों में विभाजित करता है, ताकि यह textarea नियंत्रण में पाठ की कई पंक्तियों के रूप में प्रस्तुत कर सके।

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

आउटपुट:

आउटपुट से

• यह स्पष्ट रूप से देखा जा सकता है कि गुंजाइश वस्तु के हिस्से के रूप में pDescription चर को सौंपा गया मान textarea नियंत्रण में पारित किया गया था।
• बाद में, यह पृष्ठ लोड होने पर प्रदर्शित किया गया है।

२) इनपुट तत्व

एनजी-मॉडल निर्देश इनपुट तत्वों जैसे टेक्स्ट बॉक्स, चेकबॉक्स, रेडियो बटन, आदि पर भी लागू किया जा सकता है।

आइए एक उदाहरण देखें कि हम "टेक्स्टबॉक्स" और "चेकबॉक्स" इनपुट प्रकार के साथ एनजी-मॉडल का उपयोग कैसे कर सकते हैं।

यहां हमारे पास एक टेक्स्ट इनपुट प्रकार होगा जिसमें "गुरु 99" का नाम होगा और 2 चेकबॉक्स होंगे, जिनमें से एक डिफ़ॉल्ट रूप से चिह्नित होगा और दूसरा चिह्नित नहीं होगा।

Guru99 Global Event
   Topic Description:

   Name : 
   Topic :
   Controller
   Models

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

1. एनजी मॉडल निर्देश इनपुट प्रकार पाठ नियंत्रण करने के लिए "pname" कहा जाता सदस्य चर संलग्न करने के लिए प्रयोग किया जाता है। "Pname" चर में "Guru99" का पाठ होगा जो पाठ इनपुट नियंत्रण पर पारित किया जाएगा। ध्यान दें कि सदस्य चर के नाम पर कोई भी नाम दिया जा सकता है।
2. यहां हम अपने पहले चेकबॉक्स "कंट्रोलर" को परिभाषित कर रहे हैं, जो सदस्य चर विषय से जुड़ा हुआ है। नियंत्रक। इस चेक नियंत्रण के लिए चेकबॉक्स चिह्नित किया जाएगा।
3. यहां हम अपने पहले चेकबॉक्स "मॉडल" को परिभाषित कर रहे हैं जो सदस्य चर विषय से जुड़ा हुआ है। इस चेक कंट्रोल के लिए चेकबॉक्स को चिह्नित नहीं किया जाएगा।
4. यहाँ हम "pName" नामक सदस्य चर को संलग्न कर रहे हैं और "Guru99" का एक स्ट्रिंग मान डाल रहे हैं।
5. हम "विषय" नामक एक सदस्य सरणी चर की घोषणा कर रहे हैं और इसे दो मान दे रहे हैं, पहला "सत्य" है और दूसरा "असत्य" है।

   इसलिए जब पहले चेकबॉक्स को सही का मान मिलता है, तो चेक-बॉक्स को इस नियंत्रण के लिए चिह्नित किया जाएगा, और इसी तरह, चूंकि दूसरा मूल्य गलत है, चेक-बॉक्स को इस नियंत्रण के लिए चिह्नित नहीं किया जाएगा।

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

आउटपुट:

आउटपुट से,

• यह स्पष्ट रूप से देखा जा सकता है कि pName वैरिएबल को असाइन किया गया मान "Guru99" है
• चूंकि पहला चेक मान "सत्य" है, यह पारित हो गया, चेकबॉक्स "कंट्रोलर्स" चेकबॉक्स के लिए चिह्नित है। इसी तरह से दूसरा मान गलत है, चेकबॉक्स "मॉडल" चेकबॉक्स के लिए चिह्नित नहीं है।

3) तत्व रूप ड्रॉपडाउन का चयन करें

एनजी-मॉडल निर्देश भी चयनित तत्व पर लागू किया जा सकता है और चयन सूची में सूची आइटम को पॉप्युलेट करने के लिए उपयोग किया जा सकता है।

आइए एक उदाहरण देखें कि हम चुनिंदा इनपुट प्रकार के साथ एनजी-मॉडल का उपयोग कैसे कर सकते हैं।

यहां हमारे पास एक टेक्स्ट इनपुट प्रकार होगा जिसमें "गुरु99" का नाम होगा और "नियंत्रक" और "मॉडल" के 2 सूची आइटम के साथ एक चयन सूची होगी।

Guru99 Global Event
   Topic Description:

   Name : 
   Topic :
   {{Topics.option1}}{{Topics.option2}}

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

   यदि कोड सफलतापूर्वक निष्पादित किया गया है, तो निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

आउटपुट से, यह देखा जा सकता है कि pName वैरिएबल को असाइन किया गया मान "Guru99" है और हम देख सकते हैं कि चुनिंदा इनपुट कंट्रोल में "कंट्रोलर्स" और "मॉडल" के विकल्प हैं।

सारांश

• एनगुलर जेएस में मॉडल एनजी-मॉडल निर्देश द्वारा दर्शाए गए हैं। इस निर्देश का प्राथमिक उद्देश्य मॉडल को देखने के लिए बाध्य करना है। एनजी-ऐप, एनजी-कंट्रोलर और एनजी-मॉडल निर्देशों का उपयोग करके एक सरल नियंत्रक का निर्माण कैसे करें।
• एनजी-मॉडल निर्देश को "पाठ क्षेत्र" इनपुट नियंत्रण से जोड़ा जा सकता है और मल्टीलाइन तार को नियंत्रक से दृश्य में पारित किया जा सकता है।
• एनजी-मॉडल निर्देश को इनपुट नियंत्रणों से जोड़ा जा सकता है जैसे कि पाठ और चेकबॉक्स नियंत्रण उन्हें रन टाइम पर अधिक गतिशील बनाने के लिए।
• एनजी-मॉडल निर्देश का उपयोग उन चुनिंदा सूची को चुनने के लिए भी किया जा सकता है, जिन्हें उपयोगकर्ता को प्रदर्शित किया जा सकता है।