AngularJS Data Bindings (One-way, Two-way) with Examples

Here we will learn what is data binding in angularjs, types of data bindings (one-way, two-way) in angularjs and how to use data binding in angularjs applications with simple example.

AngularJS Data Binding

The data binding is the data synchronization processes that work between the model and view components. In Angular, model treat as source of application and view is the projection of angular model.

 

In angularjs when model data got changed that time the view data will change automatically and vice versa.

 

We have two types of data bindings available in angularjs those are

 

                1. One-Way data binding

 

                2. Two-Way data binding

 

We will learn each binding in detail with examples in angularjs.

AngularJS One-Way Data Binding

In One-Way data binding, view (UI part) not updates automatically when data model changed and we need to write custom code to make it updated every time. Its not a synchronization processes and it will process data in one way that will be like as shown following image.

 

Angularjs one way data binding process with example

 

We will see simple example of using one way data binding in angularjs.

AngularJS One-way Data Binding Example

Following is the example of using one way data binding in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Two Binding Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

app.controller('angulartwobindingCtrl', function ($scope) {

$scope.name = 'Welcome to Tutlane.com';

});

</script>

</head>

<body ng-app="angulartwobindapp">

<div ng-controller="angulartwobindingCtrl">

<p>

Message:   {{ name }}

</p>

</div>

</body>

</html>

Here if you observe above code we are binding model values to html elements using data bindings but html elements it won't change the values in model its one way data binding. Now run application and see the output.

Output of AngularJS One-way Data Binding

Following is the output of angularjs one way data binding

 

Message: Welcome to Tutlane.com

AngularJS Two-way Data Binding

In Two-way data binding, view (UI part) updates automatically when data model changed. Its synchronization processes and two way data binding that will be like as shown following image.

 

Angularjs two way data binding process with example

 

We can achieve this two-way data binding using ng-model directive. If we use ng-model directive in html control it will update value automatically whenever data got changed in input control.

How does data binding will work AngularJs?

In AngularJs, it will remember present values and compare it with previous value. If any changes found in previous value that time change event will fire automatically and it will update data every time when data got changed. 

 

The HTML tells the AngularJs compiler to create the $watch for controller methods and its run inside the $apply method. We will see simple example for two way data binding in angularjs.

AngularJS Two-way Data Binding Example

Following is the example of binding data in two way in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Two Binding Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

app.controller('angulartwobindingCtrl', function ($scope) {

$scope.name = 'Welcome to Tutlane.com';

});

</script>

</head>

<body ng-app="angulartwobindapp">

<div ng-controller="angulartwobindingCtrl">

Enter Name : <input type="text" ng-model="name" style="width:250px" />

<p>

Entered Name:   {{ name }}

</p>

</div>

</body>

</html>

If you observe above code we defined ng-model objective to html control and used same ng-model value to show input control value. Here whenever we change input control value automatically the appearance value also will get changed. Now we will run and see the output.

Output of AngularJS Two-way Data Binding

Following is the result of two way data binding in angularjs application

 

 

This is how we can use both one-way and two-way data bindings in angularjs applications.