Implement 2 way data binding in AngularJS

We all know that the best feature of Angular (not only angular, but many frameworks) is 2 ways data binding. If you are beginner of angularJS then you might know the concept but may not implement it practically, if so then this blog is for you.

Let’s discuss , what is 2 way data binding . Two way data binding helps to update view when the model change and update model when data in view change.

So, If we think in simple way, the two way binding is.

   1)      Update model when data in view change

   2)      Update view when data in model change

Update model when data change in view.

Here is the angular implementation. We have created one simple module and attached controller with it.

    <script>

        var myapp = angular.module('myapp', []);

        myapp.controller('myController', function ($scope) {

            $scope.getData = function (login) {

                alert(JSON.stringify(login));

            }

        })

    </script>

Let’s implement view now. Have a look on below code.

<div ng-app="myapp">

        <div ng-controller="myController">

          

            <form ng-submit="getData(login)" ng-model="login">

                <input type="text" name="username" ng-model="login.username" />

                <input type="text" name="password" ng-model="login.password" />

                <input type="submit" name="submit" value="Submit Data" />

                </form>

        </div>

    </div>

We have implemented very simple login form, which contains “login” model. Now If we submit the form we will get data from login model. This is one of 2 way data binding.

Now we will update view from model. The typical scenario is , the view will automatically update when model data will get change. The model can get change from various data source like from service or from DB.

In this sample example we will update view from mode.  The code is little modified of previous example.

<script>

        var myapp = angular.module('myapp', []);

        myapp.controller('myController', function ($scope) {

            $scope.showData = function () {

                var loginDetail = new Object();

                loginDetail.username = "sourav";

                loginDetail.password = "kayal";

                $scope.login = loginDetail;

            };

        })

    </script>  

 We will modify the old view.

<div ng-app="myapp">

        <div ng-controller="myController">

          

            <form ng-submit="getData(login)" ng-model="login">

                <input type="text" name="username" ng-model="login.username" />

                <input type="text" name="password" ng-model="login.password" />

                <input type="button" name="Get Data" value="Read Data" ng-click="showData()"></form>

          

        </div>

    </div>

When we will click on Read Data button it will cal lto showData() function which we have defined within controller and the view will get update.