Introduction:
In this tutorial I will demonstrate how two-way data binding works in AngularJS.
Description:
Below code is used to two way data binding in AngularJS
To implement this we need to write the code like as shown below
To implement this we need to write the code like as shown below
Java Script :
//Create the module
var myApp = angular
.module("myModule5", [])
.controller("myController5", function ($scope) {
var employee = {
firstName: "Muhammad",
lastName: "Asif",
Age: "25"
};
$scope.employee = employee;
});HTML :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Two way databinding in AngularJS.html</title>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/Script.js"></script>
</head>
<body ng-app="myModule5" >
<div ng-controller="myController5" style="width:50%;margin:auto;border:1px solid #000;">
<table style="width:100%;">
<tr>
<td>
First Name
</td>
<td>
<input type="text" placeholder="Firstname"
ng-model="employee.firstName" />
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" placeholder="Lastname"
ng-model="employee.lastName" />
</td>
</tr>
<tr>
<td>
Age
</td>
<td>
<input type="text" placeholder="Age"
ng-model="employee.Age" />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
First Name
</td>
<td>
{{ employee.firstName }}
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
{{ employee.lastName }}
</td>
</tr>
<tr>
<td>
Gender
</td>
<td>
{{ employee.Age }}
</td>
</tr>
</table>
</div>
</body>
</html>
DEMO
No comments:
Post a Comment