Introduction:

In this article we will explain how to use two way data binding in AngularJS with example.

  • Description:

 

In angularJS  Two way data binding is the automatic synchronization of data between the model and view components. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

Let’s see an example Two way data binding in angularjs

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
  
    <script>
        var app = angular.module('app', []);
        app.controller('myController', function ($scope) {
            $scope.Name = 'manoj sharma';
            $scope.ContactNo = '75*******';
            $scope.Address = 'mumbai, India';
        });
    </script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <h2>two way data binding - AngularJS</h2>
        Enter Name :&nbsp;&nbsp;<input type="text" ng-model="Name" /><br /><br />
        Enter ContactNo.:&nbsp;<input type="text" ng-model="ContactNo" /><br /><br />
        Enter Address: &nbsp;<input type="text" ng-model="Address" /><br /><br />
        <hr />
        <p> Your Name:&nbsp; {{ Name }} </p>
        <p> Contact:&nbsp; {{ ContactNo }} </p>
        <p>Address:&nbsp; <span ng-bind="Address"></span></p>
    </div>
    </body>
</html>

 

 

Output:

AngularJS Two way data binding


In above code , we have Name, ContactNo and Address representing the model value. When the page loads, these values are set in the data binding placehoders (here first data binding placeholder is {{ Name}} and second data binding placeholder is  {{ ContactNo }} and third data binding placeholder is ng-bind attribute.

Now when user make changes the textbox value, the placeholder  value {{ Name}} and second data binding placeholder {{ ContactNo }} and third data binding placeholder ng-bind is update automatically real time (two way data binding - view to model).

 I hope this article will help to you.

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like