Post
Ask Question

DataBinding In AngularJS

One of the important features of AngularJS is Data Binding, which is a concept used to bind UI related items with the programing variables /objects.

UI will update automatically, whenever the programing items are updated.

AngularJS supports two types of Bindings, which are-

1. One-way Binding

In One way Binding, UI will get the updated values, whenever you modify the variables. In this Binding, only reading the value from the variables and updates in UI takes place. UI cannot update the value of the variables.

It can be implemented, using AngularJS expressions (or) ng-bind.

Ex - <span>{{X}}</span>

Example For One way Binding

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="scripts/angular.min.js">  
  5.           
  6.     </script>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <div ng-app="" ng-init="x='maya'">  
  11.     UserName:<input type="text"/>  
  12.         <span>welcome to {{x}}</span>  
  13.     </div>  
  14.     </form>  
  15. </body>  
  16. </html>  
2. Two-wayBinding

In Two-way Binding , HTML controls are bound with the variables. If you update the variable, it will reflect in the controls. If you update the control value, it will be reflected in the variable. It can be implemented, using "ng-model" directive.

Ex -<input type="text" ng-model="X"/>

Example for Two -way Binding
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="scripts/angular.min.js">  
  5.           
  6.     </script>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <div ng-app="" ng-init="x='maya'">  
  11.     UserName:<input type="text" ng-model="x" />  
  12.         <span>welcome to {{x}}</span>  
  13.     </div>  
  14.     </form>  
  15. </body>  
  16. </html>