What is Two Way Data Binding?
Two way data binding means we have to just keep in mind :When we update Model, View gets updated and when we update View, Model gets updated.
(View means User Interface and Model means Data)
NOTE : Just copy paste the code given below and run in browser:
---------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script >
angular.module('AppModule', [])
.controller('AppController', AppController);
function AppController() {
var vm = this;
//For One Employee
var employee = {
firstName: "Aishi",
lastName: "Asati",
Salary: "20000",
Id: "1"
};
vm.employee = employee;
}
</script>
</head>
<body>
<!--Including Module and Controller-->
<div ng-app="AppModule" ng-controller="AppController as vm">
<!--Binding the value from model-->
<p><b>Binding the value from model</b></p>
<table>
<tr>
<td> First name: </td>
<td>{{vm.employee.firstName}}</td><!--Binding Expression -->
</tr>
<tr>
<td> Last name: </td>
<td>{{vm.employee.lastName}}</td>
</tr>
<tr>
<td> Salary:</td>
<td>{{vm.employee.Salary}}</td>
</tr>
<tr>
<td> Id: </td>
<td>{{vm.employee.Id}}</td>
</tr>
</table>
<!--Binding the value from view-->
<p><b>Binding the value from view</b></p>
<table>
<tr>
<td> First name: </td>
<td><input type="text" ng-model="vm.employee.firstName" /></td><!--Binding from view -->
</tr>
<tr>
<td> Last name: </td>
<td><input type="text" ng-model="vm.employee.lastName" /></td>
</tr>
<tr>
<td> Salary:</td>
<td><input type="text" ng-model="vm.employee.Salary" /></td>
</tr>
<tr>
<td> Id: </td>
<td><input type="text" ng-model="vm.employee.Id" /></td>
</tr>
</table>
</div>
</body></html>
-------------------------------------------------------------------------------------------------------------------
Please Do Comment For Any Suggestions And Queries....
Two way data binding means we have to just keep in mind :When we update Model, View gets updated and when we update View, Model gets updated.
(View means User Interface and Model means Data)
NOTE : Just copy paste the code given below and run in browser:
---------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script >
angular.module('AppModule', [])
.controller('AppController', AppController);
function AppController() {
var vm = this;
//For One Employee
var employee = {
firstName: "Aishi",
lastName: "Asati",
Salary: "20000",
Id: "1"
};
vm.employee = employee;
}
</script>
</head>
<body>
<!--Including Module and Controller-->
<div ng-app="AppModule" ng-controller="AppController as vm">
<!--Binding the value from model-->
<p><b>Binding the value from model</b></p>
<table>
<tr>
<td> First name: </td>
<td>{{vm.employee.firstName}}</td><!--Binding Expression -->
</tr>
<tr>
<td> Last name: </td>
<td>{{vm.employee.lastName}}</td>
</tr>
<tr>
<td> Salary:</td>
<td>{{vm.employee.Salary}}</td>
</tr>
<tr>
<td> Id: </td>
<td>{{vm.employee.Id}}</td>
</tr>
</table>
<!--Binding the value from view-->
<p><b>Binding the value from view</b></p>
<table>
<tr>
<td> First name: </td>
<td><input type="text" ng-model="vm.employee.firstName" /></td><!--Binding from view -->
</tr>
<tr>
<td> Last name: </td>
<td><input type="text" ng-model="vm.employee.lastName" /></td>
</tr>
<tr>
<td> Salary:</td>
<td><input type="text" ng-model="vm.employee.Salary" /></td>
</tr>
<tr>
<td> Id: </td>
<td><input type="text" ng-model="vm.employee.Id" /></td>
</tr>
</table>
</div>
</body></html>
-------------------------------------------------------------------------------------------------------------------
Please Do Comment For Any Suggestions And Queries....