AngularJS में “ng-model” का उपयोग उदाहरणों के साथ कैसे करें

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

⚡ स्मार्ट सारांश

AngularJS में ng-model एक इनपुट कंट्रोल को सीधे $scope पर मौजूद प्रॉपर्टी से जोड़ता है।ping व्यू और मॉडल दोनों दिशाओं में सिंक्रनाइज़ किए गए हैं। नीचे दिए गए अनुभागों में एट्रिब्यूट, तीन कार्यशील उदाहरण और शुरुआती लोगों द्वारा सबसे अधिक की जाने वाली त्रुटियों को शामिल किया गया है।

  • 🔗 दो-तरफ़ा बंधन: ng-model उपयोगकर्ता द्वारा दिए गए इनपुट को $scope प्रॉपर्टी में डालता है और कंट्रोलर द्वारा किए गए परिवर्तनों को स्वचालित रूप से वापस कंट्रोल में डाल देता है।
  • 📝 टेक्स्टएरिया बाइंडिंग: एक मल्टी-लाइन स्ट्रिंग को टेक्स्टएरिया से बाइंड करें और रेंडर किए गए मान में लाइन ब्रेक लाने के लिए \n एस्केप सीक्वेंस का उपयोग करें।
  • ️ चेकबॉक्स की स्थिति: ng-model से बंधा हुआ चेकबॉक्स एक बूलियन मान संग्रहीत करता है, इसलिए true बॉक्स को चेक किए गए के रूप में दिखाता है और false इसे अनचेक छोड़ देता है।
  • ???? ड्रॉपडाउन सूचियाँ: एक सेलेक्ट एलिमेंट को ng-options से भरें और चुने गए आइटम को एक अलग मॉडल प्रॉपर्टी से बाइंड करें।
  • ⚠️ सामान्य विफलता: किसी चयन क्वेरी को उसी ऑब्जेक्ट से जोड़ने पर जो उसका विकल्प टेक्स्ट प्रदान करता है, पहले चयन पर वह ऑब्जेक्ट ओवरराइट हो जाता है।
  • ️ सत्यापन हुक: एनजी-मॉडल एनजी-प्रिस्टिन, एनजी-डर्टी, एनजी-वैध और एनजी-अमान्य कक्षाएं जोड़ता है जो सशर्त स्टाइलिंग और फॉर्म चेक को संचालित करता है।
विस्तार में पढ़ें

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

AngularJS में ng-model एक डायरेक्टिव है जो मॉडल को रिप्रेजेंट करता है, और इसका मुख्य उद्देश्य "व्यू" को "मॉडल" से जोड़ना है। उपयोगकर्ता किसी कंट्रोल में जो कुछ भी टाइप करता है, वह सीधे ng-model पर मौजूद प्रॉपर्टी में लिख दिया जाता है। $scopeऔर कंट्रोलर उस प्रॉपर्टी में जो कुछ भी लिखता है, वह सीधे कंट्रोल में वापस भेज दिया जाता है।

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

आप ng-model डायरेक्टिव का उपयोग करके "प्रथम नाम" और "अंतिम नाम" टेक्स्ट बॉक्स फ़ील्ड को अपने डेटा मॉडल से मैप कर सकते हैं। यह डायरेक्टिव यह सुनिश्चित करेगा कि "व्यू" और आपके "मॉडल" का डेटा बिना किसी इवेंट-हैंडलिंग कोड के हर समय सिंक्रनाइज़ रहे।

⚠️ संस्करण संबंधी टिप्पणी: AngularJS (1.x शाखा) का सपोर्ट 31 दिसंबर 2021 को समाप्त हो गया और अब इसे सुरक्षा पैच नहीं मिलते हैं। नीचे दिए गए उदाहरण अभी भी चलते हैं, लेकिन आधुनिक Angular में वही दो-तरफ़ा बाइंडिंग इस प्रकार लिखी जाती है। [(ngModel)] और इसके लिए FormsModule की आवश्यकता होती है।

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

जैसा कि ऊपर के अनुभाग में चर्चा की गई है, ng-model विशेषता का उपयोग आपके मॉडल में मौजूद डेटा को उपयोगकर्ता को प्रस्तुत किए जाने वाले दृश्य से जोड़ने के लिए किया जाता है।

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

  1. व्यू में इनपुट, टेक्स्ट एरिया और सेलेक्ट एलिमेंट जैसे कंट्रोल्स को मॉडल में बाइंड करना।
  2. सत्यापन व्यवहार प्रदान करना — उदाहरण के लिए, एक टेक्स्ट बॉक्स में सत्यापन जोड़ा जा सकता है ताकि केवल संख्यात्मक वर्ण ही दर्ज किए जा सकें।
  3. नियंत्रण की स्थिति को बनाए रखना। स्थिति से हमारा तात्पर्य यह है कि नियंत्रण और डेटा हमेशा सिंक्रनाइज़ रहें: यदि डेटा का मान बदलता है, तो नियंत्रण का मान स्वचालित रूप से बदल जाता है, और इसके विपरीत भी।
  4. उस स्थिति को CSS क्लास के रूप में प्रदर्शित करना। AngularJS जोड़ता है ng-pristine, ng-dirty, ng-valid और ng-invalid प्रत्येक कंट्रोल में एक ng-model होता है, जिससे फॉर्म की कंडीशनल स्टाइलिंग सरल हो जाती है।

एक बार विशेषता समझ में आ जाने के बाद, अगला चरण इसे उन तीन प्रकार के नियंत्रणों पर लागू करना है जिनसे आपका सामना सबसे अधिक बार होगा।

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

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

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

अब आइए एक सरल उदाहरण देखें कि हम टेक्स्ट एरिया कंट्रोल में ng-model डायरेक्टिव कैसे जोड़ सकते हैं। इस उदाहरण में, हम यह दिखाना चाहते हैं कि हम कंट्रोलर से व्यू में एक मल्टीलाइन स्ट्रिंग कैसे पास कर सकते हैं और उस मान को टेक्स्ट एरिया कंट्रोल से कैसे जोड़ सकते हैं।

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

Code स्पष्टीकरण:

  1. RSI एनजी-मॉडल निर्देश यह "p" नामक सदस्य चर को संलग्न करता हैDescript“आयन” को “टेक्स्टएरिया” नियंत्रण में जोड़ें। “पी”Descript"ion" वेरिएबल में वह टेक्स्ट होता है जो टेक्स्ट एरिया कंट्रोल को पास किया जाता है। rows="4" और cols="50" एट्रिब्यूट्स केवल कंट्रोल का आकार निर्धारित करते हैं ताकि मल्टी-लाइन टेक्स्ट सही ढंग से प्रदर्शित हो सके।
  2. सदस्य चर “pDescript"आयन" को एक बहु-पंक्ति मान सौंपा गया है। \n स्ट्रिंग के अंदर मौजूद एस्केप सीक्वेंस ही वह चीज है जो टेक्स्ट एरिया द्वारा रेंडर किए जाने पर टेक्स्ट को दूसरी लाइन पर जाने के लिए मजबूर करती है।

आउटपुट:

आउटपुट से यह स्पष्ट है कि कंट्रोलर में असाइन किया गया मल्टीलाइन टेक्स्ट टेक्स्ट एरिया कंट्रोल में प्रदर्शित होता है, जो ठीक उसी स्थान पर दो पंक्तियों में विभाजित होता है जहां \n बैठता है।

संबंधित आलेख

2) इनपुट तत्व

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

Code स्पष्टीकरण:

  1. ng-model निर्देश टेक्स्ट इनपुट कंट्रोल से सदस्य चर "pname" को जोड़ता है, और गुणधर्मों को भी जोड़ता है। Topic.Controller और Topic.Models दो चेकबॉक्स नियंत्रणों के लिए।
  2. कंट्रोलर में, “pname” को स्ट्रिंग “ दी गई हैGuru99”, और “Topic” ऑब्जेक्ट को दो बूलियन सदस्य दिए गए हैं। ng-model से बंधा हुआ चेकबॉक्स हमेशा एक बूलियन पढ़ता और लिखता है, यही कारण है true बॉक्स को चेक के रूप में दिखाता है और false इसे स्पष्ट कर देता है।

आउटपुट:

आउटपुट से,

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

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

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

यहां हमारे पास एक टेक्स्ट इनपुट होगा जिसमें नाम “ होगाGuru99”, और दो सूची आइटमों वाली एक चयन सूची, “कंट्रोलर” और “मॉडल”।

⚠️ सुधार: ऊपर दिए गए स्क्रीनशॉट में मूल लिस्टिंग दिखाई गई है, जिसमें सेलेक्ट एलिमेंट को उसी से जोड़ा गया है। Topics वह ऑब्जेक्ट जो विकल्प का टेक्स्ट प्रदान करता है। जैसे ही कोई उपयोगकर्ता विकल्प चुनता है, AngularJS उसे ओवरराइट कर देता है। Topics चयनित स्ट्रिंग के साथ दोनों विकल्प गायब हो जाते हैं। नीचे दी गई संशोधित सूची में सूची को एक प्रॉपर्टी में और चयन को दूसरी प्रॉपर्टी में रखा गया है, और इसका उपयोग किया गया है। ng-options सूची बनाने के लिए।

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code स्पष्टीकरण:

  1. टेक्स्ट इनपुट इससे जुड़ा हुआ है pNameऔर चयनित तत्व इससे बंधा हुआ है selectedTopicक्योंकि सेलेक्ट में अपनी खुद की मॉडल प्रॉपर्टी होती है, इसलिए किसी विकल्प को चुनने से सूची में कोई बदलाव नहीं होता है।
  2. RSI Topics ऐरे में "कंट्रोलर" और "मॉडल" नामक दो मान होते हैं। ng-options एक्सप्रेशन उस ऐरे को स्कैन करता है और प्रत्येक एंट्री के लिए एक विकल्प प्रस्तुत करता है, इसलिए तीसरा विषय जोड़ने के लिए मार्कअप में किसी बदलाव की आवश्यकता नहीं होती है।
  3. selectedTopic यह पहले से ही पहली प्रविष्टि पर सेट होता है, जिसके कारण ड्रॉपडाउन एक खाली पंक्ति के बजाय एक उपयुक्त डिफ़ॉल्ट मान के साथ खुलता है।

आउटपुट:

आउटपुट से यह देखा जा सकता है कि असाइन किया गया मान pName चर है “Guru99”, और सेलेक्ट कंट्रोल “कंट्रोलर” और “मॉडल्स” के विकल्प प्रदान करता है। कार्यशील उदाहरणों के अलावा, बाइंडिंग कभी-कभी अपडेट होने से इनकार कर देती हैं, और इसके कारणों को जानना महत्वपूर्ण है।

ng-model बाइंडिंग कभी-कभी विफल क्यों हो जाती हैं?

रिपोर्ट की गई अधिकांश ng-model समस्याएं AngularJS में बग नहीं हैं, बल्कि स्कोप और प्रिमिटिव के काम करने के तरीके के परिणाम हैं।

इसका सबसे आम उदाहरण एक डायरेक्टिव के अंदर रखा गया बाइंडिंग है जो एक चाइल्ड स्कोप बनाता है, जैसे कि एनजी-दोहरानेng-if या ng-switch. लेखन ng-model="name" इससे चाइल्ड स्कोप पर एक शैडो कॉपी बन जाती है, इसलिए पैरेंट कभी भी एडिट को नहीं देख पाता। इसके बजाय किसी ऑब्जेक्ट की प्रॉपर्टी से बाइंडिंग करना बेहतर है। ng-model="user.name" — यह हर स्कोप को एक ही संदर्भ की ओर इंगित करता है। यही कारण है कि अनुभवी AngularJS डेवलपर हर ng-model एक्सप्रेशन में डॉट लगाने पर जोर देते हैं।

बाकी बचे मामलों के लिए दो और कारण जिम्मेदार हैं:

  • नियंत्रक या मॉड्यूल अनुपलब्ध है: यदि ng-app या ng-controller की वर्तनी गलत है, तो बाइंडिंग त्रुटि उत्पन्न करने के बजाय चुपचाप कुछ भी रेंडर नहीं करती है।
  • AngularJS के बाहर मान में परिवर्तन हुआ: jQuery हैंडलर या setTimeout कॉलबैक से सेट किया गया मान डाइजेस्ट चक्र के बाहर आता है, इसलिए व्यू तब तक रीफ्रेश नहीं होता जब तक कि $scope.$apply() रन।

इन तीन चीजों की जांच करने से उन अधिकांश समस्याओं का समाधान हो जाता है जो काम नहीं कर रही होती हैं।

अक्सर पूछे जाने वाले प्रश्न

ng-bind एकतरफा है: यह एक एलिमेंट में मॉडल वैल्यू प्रिंट करता है। ng-model दोतरफा है और केवल फॉर्म कंट्रोल्स पर काम करता है, इसलिए यूजर इनपुट मॉडल में वापस भी जाता है और उससे बाहर भी।

उदाहरण के लिए, ng-model-options जोड़ें, जैसे कि ng-model-options=”{ debounce: 500 }”। AngularJS अंतिम कीस्ट्रोक के बाद मॉडल को अपडेट करने से पहले आधा सेकंड प्रतीक्षा करता है, जो अनुरोध ट्रिगर करने वाले खोज बॉक्स के लिए उपयोगी है।

हाँ, मोटे तौर पर। AI सहायक ng-model को [(ngModel)] के रूप में पुनः लिखते हैं और FormsModule आयात जोड़ते हैं। रिएक्टिव फॉर्म, कस्टम पार्सर और $formatter पाइपलाइन को अभी भी मैन्युअल समीक्षा की आवश्यकता है, क्योंकि एंगुलर उन्हें बहुत अलग तरीके से मॉडल करता है।

एआई उपकरण सामान्य संदिग्धों की शीघ्रता से जाँच करते हैं: चाइल्ड स्कोप के भीतर एक प्रिमिटिव बाउंड, गलत वर्तनी वाला कंट्रोलर नाम, और डाइजेस्ट चक्र के बाहर असाइन किया गया मान। इनमें से प्रत्येक कंसोल त्रुटि के बजाय मौन विफलता उत्पन्न करता है।

केवल इनपुट टाइप="नंबर" को ही संख्यात्मक मान में परिवर्तित किया जाता है। टाइप="टेक्स्ट" कंट्रोल हमेशा एक स्ट्रिंग देता है, इसलिए === के साथ तुलना विफल हो जाती है। इसे स्पष्ट रूप से परिवर्तित करें, या इनपुट टाइप बदलें।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: