Can any one help me out to understand what exactly two way data binding in AngularJS means with a help of simple code.
1
-
1stackoverflow.com/questions/30425052/…Callum Linington– Callum Linington2015-06-02 07:45:56 +00:00Commented Jun 2, 2015 at 7:45
Add a comment
|
2 Answers
One way data binding -
The model values are automatically assigned to the HTML placeholder elements specified through the data binding notation, but the HTML elements don't change the values in the model(one way).
Example :
Controller :
app.controller('MainCtrl', function($scope) {
$scope.firstName = 'John';
});
HTML :
<span>First name:</span> {{firstName}}<br />
Two Way Data Binding -
The model values are automatically assigned to the HTML placeholder elements specified through the data binding notation, where HTML elements can change the value in the model(two way).
Example :
Controller :
app.controller('MainCtrl', function($scope) {
$scope.firstName = 'John';
});
HTML
<span>First name:</span> {{firstName}}<br />
<span>Set the first name: <input type="text" ng-model="firstName"/></span><br />
In above example we can change firstName model value with the help of HTML Input element.
Working example : http://plnkr.co/edit/GxqBiOoNFuECn55R4uJZ?p=preview
4 Comments
user3742125
In this example when model changes ie when "$scope.firstName" changes HTML also changes , if my understanding is not wrong. If that is the case then the label "First name:" should be "John" on page load . Right??. Please correct me if I am wrong. Actually I am trying to understand the concept of "when model changes view also changes".
User2
Yes. Its right. In first example when we update $scope.firstName value from controller then only its changed value in HTML(so one way). But in second case we can change it from controller as well as from HTML(i.e view) so it is (two way).
user3742125
Okay...But when I ran the below code in browser it is not showing First name as "John" on page load. Why it so.<!doctype html> <html ng-app> <head> <script src="ajax.googleapis.com/ajax/libs/angularjs/1.3.15/…> <script> app.controller('MainCtrl', function($scope) { $scope.firstName = 'John'; }); </script> </head> <body> <div> <span>First name:</span> {{firstName}}<br /> <span>Set the first name: <input type="text" ng-model="firstName"/></span><br /> </div> </body> </html>
User2
Please check this working example plnkr.co/edit/GxqBiOoNFuECn55R4uJZ?p=preview
Retrieved from the AngularJS homepage (2015.06.02):
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
This is possibly the simplest example of two-way data binding in Angular.
The <input> is associated to a yourName model, and the same model is used to fill the content of the <h1> tag. Modifying one will automatically update the other.
Although the data binding in the example can be seen as one-way, because you can't modify the <h1> directly, this should get you started. The AngularJS docs and tutorials contain a lot of great resources.
