two way data binding or ng-model in Angular JS

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

                         




Share this

Related Posts

Previous
Next Post »