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

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

AngularJs में ng-model क्या है?

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

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

आप अपने डेटा मॉडल में “प्रथम नाम” और “अंतिम नाम” के टेक्स्ट बॉक्स फ़ील्ड को मैप करने के लिए ng-model निर्देश का उपयोग कर सकते हैं।

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

AngularJS में ng-मॉडल

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

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

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

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

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

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

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

तो अब आइए एक सरल उदाहरण देखें कि हम टेक्स्ट एरिया नियंत्रण में ng-model निर्देश कैसे जोड़ सकते हैं।

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

एनजी-मॉडल में पाठ क्षेत्र

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
	<form>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
	<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br> 
	</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>

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

  1. RSI एनजी-मॉडल निर्देश "p" नामक सदस्य चर को जोड़ने के लिए उपयोग किया जाता हैDescriptआयन” को “textarea” नियंत्रण में जोड़ें। “p”Description” वेरिएबल में वास्तव में टेक्स्ट होगा, जिसे टेक्स्ट एरिया कंट्रोल में पास किया जाएगा। हमने टेक्स्ट एरिया कंट्रोल के लिए 2 विशेषताओं का भी उल्लेख किया है जो कि rows=4 और cols=50 हैं। इन विशेषताओं का उल्लेख इसलिए किया गया है ताकि हम टेक्स्ट की कई लाइनें दिखा सकें। इन विशेषताओं को परिभाषित करके टेक्स्ट एरिया में अब 4 पंक्तियाँ और 50 कॉलम होंगे ताकि यह टेक्स्ट की कई लाइनें दिखा सके।
  2. यहाँ हम सदस्य चर को "p" नामक स्कोप ऑब्जेक्ट से जोड़ रहे हैंDescriptआयन” और वेरिएबल में एक स्ट्रिंग मान डालना।
  3. ध्यान दें कि हम स्ट्रिंग में /n लिटरल डाल रहे हैं ताकि टेक्स्ट एरिया में प्रदर्शित होने पर टेक्स्ट कई लाइनों का हो सके। /n लिटरल टेक्स्ट को कई लाइनों में विभाजित करता है ताकि यह टेक्स्ट एरिया कंट्रोल में टेक्स्ट की कई लाइनों के रूप में प्रस्तुत हो सके।

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

आउटपुट:

एनजी-मॉडल में पाठ क्षेत्र

आउटपुट से,

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

2) इनपुट तत्व

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

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

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

एनजी-मॉडल में इनपुट तत्व

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
	<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
	<form>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pname"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Controller">Controller<br>&nbsp;&nbsp;&nbsp;
		<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>

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

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

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

आउटपुट:

एनजी-मॉडल में इनपुट तत्व

आउटपुट से,

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

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

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

आइए एक उदाहरण देखें कि हम select इनपुट प्रकार के साथ ng-model का उपयोग कैसे कर सकते हैं।

यहां हमारे पास एक टेक्स्ट इनपुट प्रकार होगा जिसका नाम “Guru99” होगा और इसमें “Controller” और “Models” के 2 सूची आइटम के साथ एक चयन सूची होगी।

एनजी-मॉडल में ड्रॉपडाउन से तत्व का चयन करें

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
	<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
	<form>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pName" value="Guru99"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
        
		<select ng-model="Topics">
		<option>{{Topics.option1}}</option>
		<option>{{Topics.option2}}</option>
		</select>
	</form>
	</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('DemoCtrl', function($scope){
	$scope.pName="Guru99";
        
		$scope.Topics =
		{
			option1 : "Controller",
			option2 : "Module"
		};     });
</script>

</body>
</html>
  1. RSI एनजी-मॉडल निर्देश का उपयोग “विषय” नामक सदस्य चर को चयन प्रकार नियंत्रण से जोड़ने के लिए किया जाता है। चयन नियंत्रण के अंदर, प्रत्येक विकल्प के लिए, हम पहले विकल्प के लिए Topics.option1 और दूसरे विकल्प के लिए Topics.option2 के सदस्य चर को जोड़ रहे हैं।
  2. यहाँ हम अपने टॉपिक्स ऐरे वैरिएबल को परिभाषित कर रहे हैं जिसमें 2 कुंजी-मान जोड़े हैं। पहले जोड़े का मान "कंट्रोलर्स" है और दूसरे का मान "मॉडल्स" है। ये मान दृश्य में चयनित इनपुट टैग को पास किए जाएँगे। यदि कोड सफलतापूर्वक निष्पादित होता है, तो निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

एनजी-मॉडल में ड्रॉपडाउन से तत्व का चयन करें

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

सारांश

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

आपको पसंद हो श्याद: