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 the 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.
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 the 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.

Javascript code

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

var mypartone = angular.module("mymodule", [])
  .controller("myController", function($scope) {
    $scope.message = "Hello C-sharpcorner Team ";
  });

Now, Switch back to your aspx page. We will bind that expression message as.

<div>
  {{ message }}
</div>

Now, just run the solution and you will see the Hello C-sharp corner displayed.

Hello c sharp

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

So, our Code is

<div>
<input tye="text" ng-model="message" />
{{message }}
</div>

Now, when you see in our ng-model directive, I had written a message that we had assigned in $scope.

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

Run the solution and we will get the following output.

C sharp corner team

As you can see, we have a textbox in which a message is shown as Hello C-sharp corner 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.

Demo

Now, if I change the value, I get the change in the message Print.

<input tye="text" ng-model="messagePrint" />

Now, let's reload the page and see the output.

Re load page

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

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.

Run the solution

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 objects.

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

var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
    var employee = {
        firstName: "Akshay",
        lastName: "Phadke",
        Address: "Mumbai ",
    };
    $scope.employee = employee;
});

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:

So, our final code is

<div>
    <table>
        <tr>
            <td>FirstName :</td>
            <td><input type="text" ng-model="employee.firstName" /></td>
        </tr>
        <tr>
            <td>LastName :</td>
            <td><input type="text" ng-model="employee.lastName" /></td>
        </tr>
        <tr>
            <td>Address :</td>
            <td><input type="text" ng-model="employee.Address" /></td>
        </tr>
    </table>
    <br /><br /><br />
    <table>
        <tr>
            <td>FirstName :</td>
            <td>{{employee.firstName}}</td>
        </tr>
        <tr>
            <td>LastName :</td>
            <td>{{employee.lastName}}</td>
        </tr>
        <tr>
            <td>Address :</td>
            <td>{{employee.Address}}</td>
        </tr>
    </table>
</div>

Now, just run the solution and see what output we get.

Run the solution and see

We got the above output.

Above output

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 !!