Data Binding in AngularJS

Two way data binding in AngularJS

Data binding keeps the model and view in synchronization. When you change the model, view is updated and when you change the view, model is updated accordingly.

two way data

Ng-model directive updates the model when the view changes. If the property in the ng-model attribute does not exist, AngularJS will create one for you.

Please refer the given hierarchy of files and folders.

demo  

Example: Two way data binding

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js"/>
var myApp = angular.module("myModule", []);
var myController = function ($scope)
{
     $scope.message = "Welcome at careerRide";
};
myApp.controller("myCont",myController);


Code for Demo.htm file.

<!DOCTYPE html/>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
          <script src="Scripts/Script.js"></script>
     </head>
     <body>
          <div ng-controller="myCont">
               <input type="text" ng-model="message"/>
               <br/><br/>
               {{message}}
          </div>
     </body>
</html>


Output:
two way data binding

If you update the content in the textbox, then the value of {message} expression will be changed accordingly. It means change in the model will update the view. So two way data binding is in action.

Let us take another example. In this example script and HTML are in same file.

Example: newMessage property creating a model behind the scene

<!DOCTYPE html/>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
     </head>
     <body>
          <div ng-controller="myCont">
               <input type="text" ng-model="message"/>
               <br/><br/>
               {{message}}
               <br/><br/>
               <input type="text" ng-model="newMessage"/>
               <br/><br/>
               {{newMessage}}
               <br/><br/>
               {{message}}
          </div>
          <script>
               var myApp = angular.module("myModule", []);
               var myController = function ($scope)
               {
                    $scope.message = "Welcome at careerRide";
               };
               myApp.controller("myCont", myController);
          </script>
     </body>
</html>


Output:
newmessage property

In this example we have declared a property name message as
$scope.message = "Welcome at careerRide";  and not declared newMessage property but it still works. Behind the scene it creates the model for us.

Let us discuss one more example with complex object.

Example : Use of complex object

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js" />
var myApp = angular.module("myModule", []);
var myController = function ($scope)
{
     var Employee =
     {
          FirstName: "Raj",
          LastName: "Parihar",
          Gender: "Male",
          Address: "Pune",
          Salary: "Rs. 40000",
          Company: "careerRide.com",
          EmailID: "info@careerRide.com"
     };
     $scope.Emp = Employee;
};
myApp.controller("myCont", myController);


Code for Demo.htm file.

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
          <script src="Scripts/Script.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body>
          <div ng-controller="myCont">
               <h2>AngularJS Complex object Application</h2>
               <table border="0">
                    <tr>
                         <td> FirstName:</td>
                         <td><input type="text" ng-model="Emp.FirstName"/></td>
                    </tr>
                    <tr>
                         <td> LastName:</td>
                         <td><input type="text" ng-model="Emp.LastName"/></td>
                    </tr>
                    <tr>
                         <td> Gender:</td>
                         <td><input type="text" ng-model="Emp.Gender"/></td>
                    </tr>
                    <tr>
                         <td> Address:</td>
                         <td><input type="text" ng-model="Emp.Address"/></td>
                    </tr>
                    <tr>
                         <td> Salary:</td>
                         <td><input type="text" ng-model="Emp.Salary"/></td>
                    </tr>
                    <tr>
                         <td> Company:</td>
                         <td><input type="text" ng-model="Emp.Company"/></td>
                    </tr>
                    <tr>
                         <td> EmailID:</td>
                         <td><input type="text" ng-model="Emp.EmailID"/></td>
                    </tr>
               </table>
               <br/><br/><br/>
               <table border="0">
                    <tr>
                         <td> FirstName:</td>
                         <td>{{Emp.FirstName}}</td>
                    </tr>
                    <tr>
                         <td> LastName:</td>
                         <td>{{Emp.LastName}}</td>
                    </tr>
                    <tr>
                         <td> Gender:</td>
                         <td>{{Emp.Gender}}</td>
                    </tr>
                    <tr>
                         <td> Address:</td>
                         <td>{{Emp.Address}}</td>
                    </tr>
                    <tr>
                         <td> Salary:</td>
                         <td>{{Emp.Salary}}</td>
                    </tr>
                    <tr>
                         <td> Company:</td>
                         <td>{{Emp.Company}}</td>
                    </tr>
                    <tr>
                         <td> EmailID:</td>
                         <td>{{Emp.EmailID}}</td>
                    </tr>
               </table>
          </div>
     </body>
</html>


Output:
complex object application
▲