What is two way data binding in angular js ?

Two way data binding keeps the model and view in sync at all times, i.e a change in model, updates the view and a change in view, updates the model.

Binding expressions update the view when model changes.

Let’s understand with code.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var app = angular.module(‘newApp’, []);
        app.controller(‘newCtrl’, function($scope) {
            $scope.name = “John”;
            $scope.age = 25;
        });
    </script>
</head>    
<body>
<div ng-app=“newApp” ng-controller=“newCtrl”>
 Name: <input type=“text” ng-model=“name”><br>
 Age: <input type=“number” ng-model=“age”><br>
<br>
Name: {{name}}<br/>
Age : {{age}}
</div>
</body>
</html>

So in this example when user enter in input field for entering name and age, below those input fields name and age automatically changes and update on UI or view.

So any change inside input field or any change in model, changes the view at same time. Output of this code will show you the result on browser.

This is two way binding in angular js if you like the post please share with your friends.

Related Posts

angular-js-icon

What is Angular js and what is module and controller ?

Angular js is a javascript framework which is used to build web applications. Benefits of angular js : Dependency injection Two way data binding Testing It uses…

angular-js-icon

What are angular js directives ? How ng-src and ng-repeat directive works.

Angular js let you extends HTML with new attributes called directives, Angular js has many built in directive two of them are ng-src and ng-repeat.  So if…

angular-js-icon

How to handle events in angular js

In this blog we will understand how to handle event actions like clicking a button. The common way to handle events is through the functions or methods….

angular-js-icon

What are the common filters used in angular js?

Filters can do three different things, format, sort and filter data. Filter can be used within a binding expression or a directive, to apply filter we use…

Leave a Reply

Your email address will not be published. Required fields are marked *