AngularJs ng-model directive In Hindi:-

Ng-model directive Angularjs का बहुत ही महत्वपूर्ण Directive है जिसका एक उदाहरण हमने Angular Controller के पाठ में भी देखा था चलिए आज हम Ng-model directive को विस्तार से समझते हैं |

Angular Js में ng-model का मुख्य कार्य है Angular Controller के scope के साथ परिभाषित (define) की गई Value को HTML के इनपुट फील्ड (Input Field) जैसे कि Text Box, select , textarea के साथ जोड़ना |

चलिए इसका एक उदाहरण देख लेते हैं कि किस प्रकार से ng-app Angular Controller के साथ HTML के इनपुट फील्ड(Input Field) को जोड़ता है |

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body>
<form ng-app="myApp" ng-controller="myController">
    Please Enter your name:
    <input type="text" name="name" ng-model="myname" required>
    <input type="submit" value="submit">
</form>
</body>

<script>
var app = angular.module("myApp",[]);
app.controller('myController',function($scope){
$scope.myname="Web3tutorial.com";
})
</script>

</html>

तो ऊपर के उदाहरण में आप देख सकते हैं कि हमने Input Field को ng-model के साथ जोड़ दिया है इसलिए जो Value हमने Angular Controller के अंदर परिभाषित किया है वही Value input field के साथ दिखाई दे रहा है और अगर आप इनपुट फिल्ड में लिखे Value को चेंज करते हैं तो Angular Controller के $scope.name ऑब्जेक्ट के अंदर भी नई वैल्यू जमा हो जाएगी |

अगर आप चाहते हैं कि आप जब ऊपर के इनपुट फील्ड के Value को Change करें तो Change होने वाली Value भी वेब पेज पर Display हो तो इसके लिए आप Angular Expiration का उपयोग कर सकते हैं चलिए इसके लिए मैं आपको एक और उदाहरण नीचे दिखा देता हूं :-

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body>
<form ng-app="myApp" ng-controller="myController">
    Please Enter your name:
    <input type="text" name="name" ng-model="myname" required>
    <input type="submit" value="submit">
    <h1>{{ myname }}</h1>
</form>
</body>

<script>
var app = angular.module("myApp",[]);
app.controller('myController',function($scope){
$scope.myname="Web3tutorial.com";
})
</script>

</html>

 

 

 

AngularJs Expression In Hindi :-