How To Use Two-Way Data Binding In AngularJS

In this article, you will learn how to use two way data binding in AngularJS.

Overview

In earlier articles, we saw how to create models and controllers, what controllers are, and what ng-src directive, in AngularJS, is .

Kindly refer to these articles

In this article,we will see what two way data binding is in AngularJS.

Introduction

  • Two-Way data binding

    Two way data binding always keeps Model and View updated, at the same time. 

    Two-Way databinding

    That means, if there is any change in the Model, it updates the View. Similarly, when View has any changes, it updates the Model, respectively.

We are going to use ng-model directive to use two way data binding, here. When a model is updated, the changes should appear in the View and vice-versa . So, we will see, with an example, how we can achieve two way data binding in AngularJS. We will be using the same JavaScript file which we used earlier.

code

We will display Hello Csharpcorner Team . Now, just write the message here. So, our final code in our JS file is

  1. var mypartone = angular  
  2.     .module("mymodule", [])  
  3.     .controller("myController"function($scope) {  
  4.         $scope.message = "Hello C-sharpcorner Team "  
  5.   
  6.     });  
Now, Switch back to your aspx page. We will bind that expression message as,
  1. <div>  
  2.   
  3.     {{message }}  
  4.   
  5.   
  6. </div>  
Now, just run the solution and you will see the Hello C-sharpcorner displayed.

browser

Now, let's take a textbox and write ng-model directive in that textbox.

So, our Code is,
  1. <div>   
  2.   <input tye="text" ng-model="message" />   
  3.     {{message }}   
  4. </div>  
Now, when you see in our ng-model directive,  I had written message which we had assigned in $scope. 

$scope.message="Hello C-sharpcorner Team "

Run the solution and we will get the following output:

output

As you can see, we got a textbox in which a message is shown as Hello C-sharpcorner Team.

Now, if I type in the textbox, it will start appearing . So, here two way data binding is in play. Kindly, look at the below demo.

PartOne Demo

Now, if I change the value, I get the change in the message Print,
  1. <input tye="text" ng-model="messagePrint" />  
Now, let's reload the page and see the output.

output

As you can see, we didn’t got any value in the textbox . When you type into the textbox, nothing will happen. What if I write the messagePrint in binding expression.

{{messagePrint}}

Run the solution. The textbox will have no value or message displayed. But as you start typing in the textbox, you will see this output.

Part Two

A model is created with messagePrint and with that model we are binding with the same data expression. So, that's why when we are typing Akshay AngularJS,  it starts appearing . Again, two way data binding is there.

Ng-directive can be used with 
  • Input
  • Select and
  • Textarea

We are displaying a simple object previously. Now, let's take some complex object.

Create a variable called employee and we will be displaying the details.

  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)  
  2. {  
  3.     var employee = {  
  4.         firstName: "Akshay",  
  5.         lastName: "Phadke",  
  6.         Address: "Mumbai ",  
  7.     };  
  8.     $scope.employee = employee;  
  9. });  
Now, we will bind that with our View .

I have taken a table tag. Inside this table tag, there are tr and td tags. We are displaying details with the help of input text ng-model .
And again, I have a table tag and bound it with our expression, as shown below:

{{employee.lastName}}

So, our final code is,
  1. <div>  
  2.     <table>  
  3.         <tr>  
  4.             <td> FirstName : </td>  
  5.             <td> <input type="text" ng-model="employee.firstName" /> </td>  
  6.         </tr>  
  7.         <tr>  
  8.             <td> LastName : </td>  
  9.             <td> <input type="text" ng-model="employee.lastName" /> </td>  
  10.         </tr>  
  11.         <tr>  
  12.             <td> Address : </td>  
  13.             <td> <input type="text" ng-model="employee.Address" /> </td>  
  14.         </tr>  
  15.     </table> <br /><br /><br />  
  16.     <table>  
  17.         <tr>  
  18.             <td>FirstName :</td>  
  19.             <td> {{employee.firstName}} </td>  
  20.         </tr>  
  21.         <tr>  
  22.             <td>LastName :</td>  
  23.             <td> {{employee.lastName}} </td>  
  24.         </tr>  
  25.         <tr>  
  26.             <td>Address :</td>  
  27.             <td> {{employee.Address}} </td>  
  28.         </tr>  
  29.     </table>  
  30. </div>  
Now, just run the solution and see what output we get.

output

We got the above output.

Part Three

As you can see, when I started typing details, the details started appearing there, because this is two way data binding. 

This means, we don’t have to write any code on form value to Model. That is the main advantage of AngularJS.

Conclusion: This was two way data binding in AngularJS. I hope this article was helpful !!