Getting Started
Data-binding keeps the View and Model in sync at all the time. It is the automatic synchronization of data between the Model and View components in AngularJS. The View treats Model as the single-source-of-truth in the application, the View reflects the change when the Model changes and vice versa.
AngularJS supports two types of data binding - one-way (expression) and two-way (ng-model). For one-way data binding, AngularJS uses expression directive and for two-way data binding, it uses ng-model directive. Let us discuss a little about these.
- Expression Directive
When a view is bound with expression directive, the system binds data in only one direction. It means if any changes happen in Model, those do not reflect in the View. In this binding, the developer has to write code that constantly syncs the View with the Model and the Model with the View.
Syntax ng-model Directive
ng-model model is two-way data binding in AngularJS. Any changes to the View are immediately reflected in the Model, and any changes in the Model are propagated to the View and vice versa, because the application treats the model as the single-source-of-truth for the application. This binding can be used in input, select and textarea.
Syntax
- <input TYPE="txt" ng-model="student.Class"/>
Using both data bindings we can play with complex data, because both data bindings support complex data binding as well.
Example
This example demonstrates both data bindings. It has taken two text boxes, the first text is bound using two way data binding and second text box is bound using a one way data binding concept and a displays text of both text boxes in view.
When you change text in the first text box, you will see the view is reflected with the first text box's text. But when you enter text in the second text box, you will see the view is not reflected with this because the second text box is bound with one way data binding.
- <HTML ng-app = "myapp">
- <TITLE>AngularJS: Data Binding</TITLE>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
- <script>
- var myapp=angular.module("myapp",[]);
- myapp.controller("myappcont",function($scope){
- $scope.message="Hellow Word: Two way binding";
- $scope.message1="Hellow Word: One way binding";
- });
- </script>
- <BODY ng-controller="myappcont">
- <h1>Data Binding Example</h1>
- <hr/><br/>
- <b>Message:</b> <INPUT TYPE="txt" ng-model="message"/><br/><br/>
- <b>Message Value:</b> {{message}} <br/><br/>
- <b>Message1:</b> <INPUT TYPE="txt" value="{{message1}}"/> <br/><br/>
- <b>Message1 Value:</b> {{message1}}
- </BODY>
- </HTML>