When the model changes the view is automatically updated. This is achieved using the data binding expression in the view.
< span style="font-family:arial, helvetica, sans-serif;">
Script.js : The code in the controller attaches message property to the scope which is the model.
var app = angular
.module("myModule", [])
.controller("myController", function($scope) {
$scope.message = "Hello Angular"
});
HtmlPage1.html : Whenever the message property value changes, the data binding expression in the view updates the view automatically.
<!DOCTYPE html>
<html xmlns="http://www.w3.org /1999/xhtml">
<head>
<title>& lt;/title>
<script src ="Scripts/angular.min.js"></script>
<script src ="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-con troller="myController">
{{ message }}
</div></ span>
</body>
</html>
How about the other way round. How to keep the model up to date when the view changes. That's exactly is the purpose of ng-model directive.
In the html below, notice the input element is decorated with ng-model directive. This ensures that whenever the value in the textbox is changed, angular will automatically update the message property of the $scope object. This means the ng-model directive automatically takes the form values and updates the model. The binding expression does the opposite, i.e whenever the model changes the view is automatically updated.
Because of the two way data binding provided by angular, as you type in the textbox, the value is immediately displayed on the v iew just below the textbox. This two way binding feature provided by angular, eliminates the need to write any custom code to move data from the model to the view or from the view to the model.
<!DOCTYPE html>
<html xmlns="http://www.w3.org /1999/xhtml">
<head>
<title>& lt;/title>
<script src ="Scripts/angular.min.js"></script>
<script src ="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-con troller="myController">
<input type="text" placeholder="Type your message here" ng-model="message" />
<br /><br />
{{ message }}
</div></ span>
</body>
</html>
ng-model directive can be used with the following 3 html elements
Two way binding example with complex object :
Script.js code : In the following example, the model is employee which is a complex object with properties like firstName, lastName and gender.
var app = angular
.module("myModule", [])
.controller("myController", function($scope) {
var employee = {
firstName: "Ben",
lastName: "Hastings",
gender: "Male"
};
$scope.employee = employee;
});
HtmlPage1.html : When the view loads, the model data is display in both, the textbox and td elements on the page. As you start to type in any of the textboxes, the respective employee model object property is updated, and the change is immediately reflected in the respective td element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org /1999/xhtml">
<head>
<title>& lt;/title>
<script src ="Scripts/angular.min.js"></script>
<script src ="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-con troller="myController">
<table>
<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>
Gender
</td>
<td>
<input type="text" placeholder="Gender"
ng-model="employee.gender" />
</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.gender }}
</td>
</tr>
</table>
</div></ span>
</body>
1 comments :
Angularjs is the great javascript framework that has some compelling features not for developers but also for the designers. Angularjs is very essential for the web developers to know about its importance.
Angularjs Training in Chennai | angularjs course in chennai
Post a Comment