Adds

AngularJS Data Binding

What is Data Binding?

Data binding is the act of establishing a connection between the user interface and business logic of a web application. It allows the user to communicate with the view of the web page in order to interact with the model. Most of the template systems support data binding in single direction only. That is, the change in model or other section of the view is not automatically projected in the view or vice versa. In angular, this works differently: Any change in model is reflected in the view and vice versa.


AngularJS and Two-Way Data Binding

With AngularJS, two-way binding between the model and view is much more simplified. When a user changes the value of an element in the view such as input to a text box, not only does the view update immediately, but the model also stores the new value.


What is Data Binding?

Data binding is the act of establishing a connection between the user interface and business logic of a web application. It allows the user to communicate with the view of the web page in order to interact with the model. Most of the template systems support data binding in single direction only. That is, the change in model or other section of the view is not automatically projected in the view or vice versa. In angular, this works differently: Any change in model is reflected in the view and vice versa.


AngularJS and Two-Way Data Binding

With AngularJS, two-way binding between the model and view is much more simplified. When a user changes the value of an element in the view such as input to a text box, not only does the view update immediately, but the model also stores the new value.The two way data binding keeps the model and view in sync at all times. A change in a model updates the view and change in view updates the model.



AngularJS - One way data binding

In One way data binding in AngularJS binding of data is from Model to View. Below is the example of one way data binding.

<!DOCTYPE html>
<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
	var app = angular.module('app', []);
	app.controller('myController', function($scope) {
		$scope.firstName = 'Mukesh';
		$scope.lastName = 'Kumar';
		$scope.address = 'OMR Road, Chennai';
	});
</script>
</head>

<body ng-app="app" ng-controller="myController">
	<h2>One way data binding Example</h2>
	<p>First Name: {{ firstName }}</p>
	<p>Last Name: {{ lastName }}</p>
	<p>
		Address: <span ng-bind="address"></span>
	</p>
</body>
</html>

In above example, we have firstName,lastName and address representing the model value. When the page loads, these values are set in the data binding place holders (here first data binding is {{firstName}} second data binding is {{lastName}} and third data binding is ng-bind attribute.

Here the data is bounded only one way ie. from Model to View.


Output:



AngularJS - Two way data binding

In two way data binding in AngularJS binding of data is from Model to View and vice versa. Below is the example of two way data binding.

<!DOCTYPE html>
<html>
	<head>
		<title>Two Way Data Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	<script>
		var app = angular.module('app', []);
		app.controller('myController', function($scope) {
			$scope.firstName = "your first name";
			$scope.lastName = "your last name";
			$scope.address = "your address";
		});
	</script>

	</head>
<body>
	<h3>Two Way Data Binding </h3>
	<div ng-app="app" ng-controller="myController">
		<p>Please Fill the form</p>
		<p>
			First Name: <input type="text" ng-model="firstName" /> <br>
			Last Name: <input type="text" ng-model="lastName" /> <br>
			Address: <input type="Text" ng-model="address" />
		</p>
		<hr>
		<p>
		First Name: <span>{{firstName}}</span><br>
		Last Name: <span>{{lastName}}</span><br>
		Address: <span ng-bind="address"></span>
		</p>
	</div>
</body>
</html>

In above example, we have firstName, lastName and Address variables in the controller representing the model value. When the page loads, these values are set in the data binding place holders (here first data binding place holder is {{ firstName}}, second data binding place holder is {{ lastName}} and third data binding place holder is ng-bind attribute.

Now when user changes the text box value, the place holder values changes in real time (two way data binding - view to model).


Output:





References :- AngulaJS Documentation



Related Articles

  1. Maven Overview




comments powered by Disqus