Two-Way Data Binding in AngularJS Example

Data binding is nothing but automatic synchronization of data between view and the model. When we say Two-Way Data Binding, it means that the synchronization process works both ways. In AngularJS, when we create a model (In Javascript) and set them on to our $scope object followed by tying up the UI components(HTML) to these models AngularJS will establish Two-Way Binding between model and view. Whenever the View changes it will be reflecting the model and vice-versa. Lets take a simple example to have a better grip over data binding.

Two-Way Data Binding in AngularJS

Upon running the below code, you can see when ever the value is entered in the “text” fields the user details will be automatically updated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <title>AngularJS Two-Way Data Binding Example</title>
    <script
       src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="TwoWayCtrl">
      <label>First Name :</label>
        <input type="text" ng-model="firstname" placeholder="Enter your First Name" /></br></br>

      <label>Second Name :</label>
        <input type="text" ng-model="lastname" placeholder="Enter your Second Name" /></br></br>

      <label>Age :</label>
        <input type="text" ng-model="age" placeholder="Enter your Age" /></br></br>
      </br>
      My First Name is : {{firstname}}</br>
      My Last Name is : {{lastname}}</br>
      My Age Name is : {{age}}</br>
 
      <script type="text/javascript">
        angular.module('myApp', [])
        .controller('TwoWayCtrl',function($scope) 
        {
        });
      </script>
     </div>
  </body>
</html>

How everything works ?

- The first thing is the ng-app which bootstraps our application, since our app doesn’t depend on any other modules we are not adding anything as a dependency. Here our application name is “myApp”, which will be used in the module of our angular application.
- We have created a controller “TwoWayCtrl” using ng-controller directive. Within the div of our controller we will be having all the business logic written
- We have created 3 labels FirstName, LastName and Age and corresponding input boxes are created. Each text fields are binded to a model ng-model firstname,lastname and age respectively.
- Followed by we have displayed the values entered in the text fields using the expression {{firstname}},{{lastname}},{{age}}
- So whenever the user enters a value in the text box, it will be displayed immediately in the corresponding bind in the UI. Since AngularJS follows two-way binding.

Output

Enter values in the First Name, Last Name, Age text fields

Lets modify the same example and increase its complexity level a bit.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <title>AngularJS Two-Way Data Binding Example</title>
    <script
       src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="TwoWayCtrl">
      <label>First Name :</label>
        <input type="text" ng-model="firstname" placeholder="Enter your First Name" /></br></br>

      <label>Second Name :</label>
        <input type="text" ng-model="lastname" placeholder="Enter your Second Name" /></br></br>

      <label>Age :</label>
        <input type="text" ng-model="age" placeholder="Enter your Age" /></br></br>
      </br>
      My First Name is : {{firstname}}</br>
      My Last Name is : {{lastname}}</br>
      My Age Name is : {{age}}</br>
     
      <form>
         <button ng-click="updateUserDetails(firstname,lastname,age)" 
            type="button">Update User Details</button>
       </form>
        <script type="text/javascript">
         angular.module('myApp', []).controller('HelloCtrl',function($scope) 
         {
            $scope.updateUserDetails = function(firstname,lastname,age) 
            {
               $scope.firstname = firstname + "- Updated";
               $scope.lastname = lastname + "- Updated";
               $scope.age = age + "- Updated";
            };
         });
        </script>
     </div>
  </body>
</html>

Output

Enter values in the First Name, Last Name, Age text fields click on the Update User Details button.

In the above code whenever we enter values in the textbox it will be displayed in the expression {{firstname}},{{lastname}},{{age}}.
We have added a form with a simple button which passes the values of firstname, lastname and age to our script. When we hit on the button “Update User Details” button, the firstname, lastname and age values will be passed to our controller through the UpdateUserDetails() method.
Once the Angular Script received the firstname, lastname and age, we are appending the “- updated” message to all of it and assign it to corresponding scope variables $scope.firstname, $scope.lastname, $scope.age
Since AngularJS follows two-way binding and we have used the same variable in the UI and as well as the script, the values will be changed in both the text fields and as well as the expression{{}}.

Thats it we have learnt how Two-Way Binding works in AngularJS :). Happy Learning !!

Two-Way Data Binding in AngularJS Example