Angular JS Data Binding

Traditional One Way Binding

Angular JS Two Way Binding


  1. In Angular JS two way binding is automatic synchronization of the data between model and view. 
  2. Following sample will help you to understand better.

<body ng-app ng-init="firstName = 'Sathish'; lastName = 'kumar';">
  <strong>First name:</strong> {{firstName}}
  <strong>Last name:</strong> <span ng-bind="lastName"></span>
  Set the first name: <input type="text" ng-model="firstName"/>
  Set the last name: <input type="text" ng-model="lastName"/>


Above Code binds the value in the view {{ firstName}} and ng-bind="lastName", When value is entered in the following input box
   <input type="text" ng-model="firstName"/>
   <input type="text" ng-model="lastName"/>

In Angular JS two way binding  can be acheived without writing any javascript events on the DOM object.

  1.  ng-app - Defines the Angular JS template in the HTML markup for the application.
  2.  ng-init - Initialize the data in the give variable  .
  3.  ng-model  - Model is nothing but a variable stored in the scope.
  4.  ng-bind - Binds the model/variable data in the specified DOM. 

1 comment

Sathish said...

Powered by Blogger.