current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

Can any one help me out to understand what exactly two way data binding in AngularJS means with a help of simple code.

share|improve this question
1  
stackoverflow.com/questions/30425052/… – Callum Linington Jun 2 '15 at 7:45
up vote 1 down vote accepted

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

share|improve this answer
    
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". – user3742125 Jun 2 '15 at 9:35
    
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). – User2 Jun 2 '15 at 10:02
    
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> – user3742125 Jun 2 '15 at 10:30
    
Please check this working example plnkr.co/edit/GxqBiOoNFuECn55R4uJZ?p=preview – User2 Jun 2 '15 at 10:52
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.