In this
article we will learn about the Two-way data binding and ng-model in angular JS.
Two-way
data binding
Generally when
we update or make changes in model, view automatically updates that is achieved
using the binding expression ( {{ }} )
How about if
we make changes in view ,then model is automatically updates ,that procedure is
called two way data binding in Angular JS , and this is achieved using the
ng-model.
Ng-model can
we use with the following HTML controls
1.
input
2.
select
3.
textarea
we will understand
with an example
1.
Go to the visual studio and add a project and right click on the
solution and add a script file and give it name as “Controller.js” and write
the following code to this file
|
/// < reference
path="angular.min.js" />
var myApp = angular.module('MyModule', []);
myApp.controller("myController", function ($scope) {
var StudentInfo = {
Name: "Munesh",
CollageName: "VIT"
};
$scope.StudentInfo =
StudentInfo;
});
|
2. Now add a HTML file to your solution and
give it name as “Index.html” and write the following code to this file
|
<!doctype html>
<html ng-app="MyModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Controller.js"></script>
</head>
<body>
<div ng-controller="myController">
<div>
Student Name : <input type="text" placeholder="Please enter
Name" ng-model="StudentInfo.Name" />
</div>
<br />
<div>
Collage Name : <input type="text" placeholder="Please enter collage
Name" ng-model="StudentInfo.CollageName" />
</div>
<div>
<h3 > Student Information :</h3> <br />
Student Name Is : <h4 style="color:red"> {{StudentInfo.Name}} </h4> Collage Name is : <h4 style="color:red">
{{StudentInfo.CollageName}} </h4>
</div>
</div>
</body>
</html>
|
When
you will run your application you will see the following output
EmoticonEmoticon