Two-way Data Binding in AngularJS

Last Updated : 11 Jul, 2022

In this article, we will see the Data Binding, along with understanding how the flow of code is from a Typescript file to an HTML file & vice-versa through their implementation.

In AngularJS, Data Binding refers to the synchronization between the model and view. In Two-way data binding, the flow of data is bidirectional i.e. when the data in the model changes, the changes are reflected in the view and when the data in the view changes it is reflected in the model. Two-way data binding is achieved by using the ng-model directive. The ng-model directive transfers data from the view to the model and from the model to the view.

Approach: The following approach will be implemented to achieve the Two-way Binding:

Create a module

var app=angular.module('myApp',[])

Add a controller to the module. Here you can write the logic for updating the model as the view changes.

app.controller('myCtrl',function($scope){})

Specify the ng-model directive in the element

<input ng-model="name"/>

Example 1: This example shows how the ng-model directive can be used for two-way data binding.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Two-way Data Binding in AngularJS
    </title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
    </script>
</head>

<body ng-app="">
    <h1>GeeksforGeeks</h1>
    <h3>Two-way Data Binding</h3>
    <form>
        <label>Enter your name </label>
        <input type="text"
               ng-model="name"> 
    </form>
    <p>{{name}}</p>
</body>
</html>

Explanation: In the above example, we have used the ng-model directive in the input element. When the user enters data in the input element it is reflected in the <p> tag where we have used an expression to display the value of 'name'. This is an example of two-way data binding as when we change the input control value the value of the variable 'name' also changes.

Output:

Example 2: In this example, we have created a registration form. The user fills in the details and clicks on the submit button. On clicking on the submit button the details filled by the user are displayed.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Two-way Data Binding in AngularJS
    </title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
    </script>
</head>

<body ng-app="myApp">
    <h1>GeeksforGeeks</h1>
    <h3>Two-way Binding</h3>
    <h4>Registration form</h4>
    <form name="registrationForm" 
          ng-controller="myCtrl">
        <label>Enter your name</label>
        <input type="text"
               ng-model="name" />
        <br />
        <label>Enter your age</label>
        <input type="text" 
               ng-model="age" />
        <br />
        <p>Courses:</p>
        <input type="checkbox"
               ng-model="value1" 
               name="option1" 
               value="C++" />
        <label>C++</label>
        <br />
        <input type="checkbox" 
               ng-model="value2" 
               name="option2" 
               value="Java" />
        <label>Java</label>
        <br />
        <input type="checkbox" 
               ng-model="value3" 
               name="option3" 
               value="Python" />
        <label>Python</label>
        <br />
        <input type="submit" 
               ng-click="details()" />
        <div>
            <br />
            <table border="1px solid black" 
                   style="border-collapse: collapse">
                <tr border="1px solid black" 
                    style="border-collapse: collapse"
                    ng-repeat="x in registrationDetails">
                    <td>{{x.key}}</td>
                    <td>{{x.value}}</td>
                </tr>
            </table>
        </div>
    </form>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.details = function() {
                $scope.courses = [];
                if($scope.value1) 
                    $scope.courses.push(registrationForm.option1.value);
                if($scope.value2) 
                    $scope.courses.push(registrationForm.option2.value);
                if($scope.value3) 
                    $scope.courses.push(registrationForm.option3.value);
                $scope.registrationDetails = [{
                    key: 'Name',
                    value: $scope.name
                }, {
                    key: 'Age',
                    value: $scope.age
                }, {
                    key: 'Courses interested in',
                    value: $scope.courses.toString()
                }, ];
            };
        });
    </script>
</body>
</html>

Output:

Two-way Data Binding in AngularJS

divyasharma5d12

Two-way Data Binding in AngularJS

Similar Reads

Thank You!

What kind of Experience do you want to share?