Wednesday, June 24, 2015

Two way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests two-way data binding is bidirectional, the data from the model is bound to the view and any changes made in the view are reflected back in the model. The ng-model directive enables two-way data binding

The core functionality of ng-model directive is to provides data binding between the model and the view in AngularJS. The ng-bind directive additionally provides validation, state management functionality.

The below example provides a basic implementation of data binding using ng-model

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Name='FirstName, LastName'">
                   Enter Name: <input type="text" ng-model="Name"><br/><br/>
                   Your Name is :{{Name}}
          </div>
</body>
</html>

Output



When the user changes the text in the text box, it automatically reflects in the label.



Search Flipkart Products:
Flipkart.com

No comments: