Simple practical example for two way data binding in AngularJS

Question

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

http://stackoverflow.com/questions/30425052/how-angularjs-implement-its-two-way-data-binding-mechanism/30425085#30425085 — Callum Linington, Jun 02 '15 at 07:45

User2 · Accepted Answer · 2015-06-02T10:55:05.540

1

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

edited Jun 02 '15 at 10:55

answered Jun 02 '15 at 08:02

User2

1,293
8
17

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 02 '15 at 09: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 02 '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.
First name: {{firstName}}
Set the first name:

– user3742125 Jun 02 '15 at 10:30
Please check this working example http://plnkr.co/edit/GxqBiOoNFuECn55R4uJZ?p=preview – User2 Jun 02 '15 at 10:52

score 0 · Answer 2 · answered Jun 02 '15 at 07:45

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.

Simple practical example for two way data binding in AngularJS

2 Answers2

Linked