Two way data binding in Angular JS
The two way data binding keeps the model and the view in sync at all times that is change in the model updates the view and change in the view updates the Model.
Binding expression updates the view when the model changes {{message}}.
Ng-model directive updates the model when the view changes.
e.g.:
myapp.js
var myctrl=myApp.controller('myController',function($scope)
{
$scope.name="Hyaking";
});
HTMLPage.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script src=”angular.js” type=”text/javascript”></script>
<script src=”myapp.js” type=”text/javascript”></script>
<style type=”text/css”>
div, input
{
font-size:26px;
}
</style>
</head>
<body ng-app=”myApp”>
<div ng-controller=”myController”>
NAME:<input type=”text” size=”30″ ng-model=”name”>
<br><br>
{{name}}
</div>
</body>
</html>
Now the two way data binding in action . When we type in the text box and we have ng-model directive value as “name” and we already have that model, the value in the text box will automatically update the model data and since we have the binding expression that automatically update the view also.
<div ng-controller= “myController”>
Age: <input type=”text” ng-model=”age”/>
<br><br>
{{name}}
<br><br>
{{age}}
</div>
In the above case a new model is created with the name of “age”.
Ng-model directive can be used with
- Input
- Select
- Text Area
E.g.: For using Complex objects in two way data binding:
Myapp.js
.controller('myController',function($scope)
{
var employee
{
firstname="Hyaking",
lastname="Cloud";
};
$scope.employee=employee;
});
HTMLpage.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script src=”angular.js” type=”text/javascript”></script>
<script src=”myapp.js” type=”text/javascript”></script>
<style type=”text/css”>
div, input
{
font-size:26px;
}
</style>
</head>
<body ng-app=”myApp”>
<div ng-controller=”myController”>
<table>
<td>First Name</td>
<td><input type=”text” ng-model=”employee.firstname”></td>
</table>
<br><br><hr><br>
<table>
<td>First Name</td>
<td>{{employee.firstname}}</td>
</table>
</div>
</body>
</html>
