Two way databinding in Angular JS
Keep
model and view in synchronization. At all time that
is the change in the model update the
view and a change in the view update the model
- Binding Expression update the view when the model changes
- ng-model directive update the model when the view changes
- ng-model directive used with :
2. Select
3. Textarea
Example :
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Data
Binding</title>
<script>
var app = angular.module("myModule",
[]);
app.controller("myController", function($scope){
$scope.message="AngularJS Tutorial";
});
</script>
</head>
<body>
<div ng-app="myModule" ng-controller="myController">
Enter Text : <input type="text" ng-model="message"/>
<br><br>
{{ message
}}
</div>
</body>
</html>
Explanation :
Whatever data
we have in model is automatically display into textbox.
in above example it is "AngularJS Tutorial"
Output :
When we change the value in textbox it is automatically updated and shows the updated data. Hence the two way binding is achieved.
Output :
When we change the value in textbox it is automatically updated and shows the updated data. Hence the two way binding is achieved.
 |
| Output after changing the value in textbox |
Example : Two way databinding by using complex object
In previous example our model is simple message property. We can work with complex object too.We have a complex object employee which have several properties like firstname, lastname, gender etc. even though the two way databinding works.
Example :
$scope.employee = employee;
In previous example our model is simple message property. We can work with complex object too.We have a complex object employee which have several properties like firstname, lastname, gender etc. even though the two way databinding works.
Example :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Data Binding</title>
<script>
var app = angular.module("myModule", []);
app.controller("myController", function($scope){
var employee = {
firstName: "Mark",
lastName: "Anderson",
gender: "male"
};
$scope.employee = employee;
});
</script>
</head>
<body>
<div ng-app="myModule" ng-controller="myController">
<table>
<tr>
<td>FirstName</td>
<td>
<input type="text" ng-model="employee.firstName">
</td>
</tr>
<tr>
<td>LastName</td>
<td>
<input type="text" ng-model="employee.lastName">
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="text" ng-model="employee.gender">
</td>
</tr>
</table>
<table>
<tr>
<td>FirstName</td>
<td>
{{ employee.firstName }}
</td>
</tr>
<tr>
<td>LastName</td>
<td>
{{ employee.lastName }}
</td>
</tr>
<tr>
<td>Gender</td>
<td>
{{ employee.gender }}
</td>
</tr>
</table>
</div>
</body>
</html>
Explanation :
In above example we have a object employee which contains several properties like firstName, lastName and gender.
Our model is employee which is nothing but the object of employee and within that object we have the properties firstName, lastName and gender.
$scope.employee = employee;
Output :
The values initially we had in our model that is our employee object those are displayed in respective textboxes.
