Tuesday , March 28 2017
Home / angularjs / AngularJs Data Binding Example

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs application synchronisation, that means it maintains the sync between the model and view.

AngularJs Data Binding :

Data binding concept is used to bind UI related items (html elements) with with programming variables.

AngularJs application maintains the Data models to represents the data. Typically the Data Model consists of data.

Example :

var app = angular.module(‘dataController’, []);
app.controller(‘dataController’, function($scope) {
$scope.firstname = “Chandra Shekhar”;
$scope.lastname = “Goka”;
});

The above example represents a typical data model in AngularJs. This data would be bind with the corresponding html elements. So that when ever any changes made on any data member from controller, it will automatically effected on the view.

Here the communication is happenning between the controller and view because of $scope object. $scope is acts as a mediator between the controller and view.

AngularJs supports two types of Data Binding :

Types of Data binding :

  • One-way Binding
  • Two-way Binding

One-way Binding :

In one-way binding the Data will be updated from the controller. When ever the values changed in Angular controller the corresponding html elements (input, select, textarea) will be updated accordingly. Here is there is no need of getter and setters like legacy Javascript and JQuery stuff.

Here the binding, data will taking from the controller variables and updated on html elements.

This will happen by making use of either AngularJs Expressions {{}} or ng-bind AngularJs directive.

Binding with Expressions :


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="expCtrl">
<p>First name: <b>{{firstname}}<b></p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('expCtrl', function($scope) {
$scope.firstname = "Chandra";
});
</script>

<p>Here the binding happening from controller.</p>

</body>
</html>

Output :

Binding with ng-bind :


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="bindCtrl">
<p>First name: <b ng-bind="firstname"></b></p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('bindCtrl', function($scope) {
$scope.firstname = "Chandra";
});
</script>

<p>Here the binding happening from controller.</p>

</body>
</html>

Output :

Two-way Binding :

In Two-way binding the html elements and controller variables are sync in each other.

When ever you change the values from html it will reflect to the corresponding variables in controller and as also vice-versa.

It can be implement by using ng-model directive.

Data Binding with ng-model :


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">

<p></p>
<p>Enter Your Name: <input type="text" ng-model="firstName"></p>
<p>Hello : <b>{{ firstName }}</b> How Are you ?</p>

</div>

</body>
</html>

Output :

Happy Learning 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Custom Service Example

In the previous tutorials we have discussed about what is AngularJs service and what are …

Leave a Reply

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