Angular JS-6 : Two way binding using ng-model
angular.min.js
-------------------------------------
Script.js
------------------------------------
/// <reference path="angular.min.js" />
var myAppModule = angular.module("myAppModule",[]).controller("myDataController",function ($scope) {
var employee = {
firstName : "pavan",
lastName : "kumar",
gender : "Male"
}
$scope.employee = employee;
});
myHTML.html
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<script type="text/javascript" src="resources/js/angular.min.js"></script>
<script type="text/javascript" src="resources/js/Script.js"></script>
</head>
<body ng-controller="myDataController">
<table>
<tr>
<td>First Name </td>
<td><input type="text" ng-model="employee.firstName"/> </td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" ng-model="employee.lastName"/> </td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>First Name </td>
<td>{{ employee.firstName}}</td>
</tr>
<tr>
<td>Last Name </td>
<td>{{ employee.lastName}} </td>
</tr>
</table>
</body>
</html>
angular.min.js
-------------------------------------
Script.js
------------------------------------
/// <reference path="angular.min.js" />
var myAppModule = angular.module("myAppModule",[]).controller("myDataController",function ($scope) {
var employee = {
firstName : "pavan",
lastName : "kumar",
gender : "Male"
}
$scope.employee = employee;
});
myHTML.html
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<script type="text/javascript" src="resources/js/angular.min.js"></script>
<script type="text/javascript" src="resources/js/Script.js"></script>
</head>
<body ng-controller="myDataController">
<table>
<tr>
<td>First Name </td>
<td><input type="text" ng-model="employee.firstName"/> </td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" ng-model="employee.lastName"/> </td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>First Name </td>
<td>{{ employee.firstName}}</td>
</tr>
<tr>
<td>Last Name </td>
<td>{{ employee.lastName}} </td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment