AngularJS डेटा बाइंडिंग
AngularJS में डेटा बाइंडिंग मॉडल और व्यू के बीच सिंक्रोनाइज़ेशन है।
डेटा मॉडल
AngularJS एप्लिकेशन में आमतौर पर एक डेटा मॉडल होता है। डेटा मॉडल एप्लिकेशन के लिए उपलब्ध डेटा का एक संग्रह है।
उदाहरण
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
एचटीएमएल व्यू
HTML कंटेनर जहां AngularJS एप्लिकेशन प्रदर्शित होता है, उसे व्यू कहा जाता है।
दृश्य के पास मॉडल तक पहुंच है, और दृश्य में मॉडल डेटा प्रदर्शित करने के कई तरीके हैं।
आप ng-bindनिर्देश का उपयोग कर सकते हैं, जो तत्व के आंतरिक HTML को निर्दिष्ट मॉडल संपत्ति से बांध देगा:
उदाहरण
<p ng-bind="firstname"></p>
आप मॉडल से सामग्री प्रदर्शित करने के लिए डबल ब्रेसिज़ का भी उपयोग कर सकते हैं :{{ }}
उदाहरण
<p>First name: {{firstname}}</p>
या आप ng-modelमॉडल को देखने के लिए बाध्य करने के लिए HTML नियंत्रण पर निर्देश का उपयोग कर सकते हैं।
ng-modelनिर्देश _
ng-modelएचटीएमएल नियंत्रण (इनपुट, चयन, टेक्स्टरेरा) पर मॉडल से डेटा को देखने के लिए निर्देश का उपयोग करें
उदाहरण
<input ng-model="firstname">
ng-modelनिर्देश मॉडल और दृश्य के बीच दो-तरफा बंधन प्रदान करता है ।
टू-वे बाइंडिंग
AngularJS में डेटा बाइंडिंग मॉडल और व्यू के बीच सिंक्रोनाइज़ेशन है।
जब मॉडल में डेटा बदलता है, तो दृश्य परिवर्तन को दर्शाता है, और जब दृश्य में डेटा बदलता है, तो मॉडल भी अपडेट हो जाता है। यह तुरंत और स्वचालित रूप से होता है, जो सुनिश्चित करता है कि मॉडल और दृश्य हर समय अपडेट किया जाता है।
उदाहरण
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
एंगुलरजेएस नियंत्रक
AngularJS में एप्लिकेशन नियंत्रकों द्वारा नियंत्रित होते हैं। AngularJS नियंत्रक अध्याय में नियंत्रकों के बारे में पढ़ें ।
मॉडल और दृश्य के तत्काल सिंक्रनाइज़ेशन के कारण, नियंत्रक को दृश्य से पूरी तरह से अलग किया जा सकता है, और बस मॉडल डेटा पर ध्यान केंद्रित किया जा सकता है। AngularJS में डेटा बाइंडिंग के लिए धन्यवाद, व्यू कंट्रोलर में किए गए किसी भी बदलाव को प्रतिबिंबित करेगा।
उदाहरण
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>