The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Sunday, 17 July 2016

AngularJS Data Binding ng-Model

with 0 Comment
Angulars Data Binding

The angularjs Data binding is also called two-way data binding. Two-way data binding keeps the model and view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

Angularjs Data Binding
Angularjs Data Binding
                                  
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myModule">
<div ng-controller="myController">
<Input type=”text” ng-model="message">        
<br/>
{{message}}
</div>
<script>
var myApp=angular.module("myModule", [])
                 .controller("myController", function($scope){
$scope.message=”welcome to angular world”;
});
</script>
</body>
</html>



  • The Binding Expression updates the view when the model changes {{message}}                .
  • ng-model directive updates the model when the view changes.

                   <input type=”text” ng-model=”messages”/>

If you run the above program you will get the text which is already available inside the text box if you give any input to the field displaying text will get change. So whatever the data we have in the model is automatically displayed in the text box. Because the ng-model directive value is same as the module in the script.


Angularjs Data Binding- angularjs model


If you want to experiment angularjs two-way data binding just type any value in the text box above program. The value of model will get updated automatically because of that ng-model directive. This action is called two-way data binding.

AngularJS Two way data binding
AngularJS Two-way data binding
                               
If you change any value to the ng-model instead of message what will happen? There will not be any text in the text boxes. Try those things with let’s try button.

Angularjs ng-model Directives can be used with

  • input
  • select
  • Textarea

AngularJS Data Binding Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<tr>
<td>First Name</td>
<td><input typr="text" ng-model="employee.firstname"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input typr="text" ng-model="employee.lastname"></td>
</tr>
<tr>
<td>Gender </td>
<td><input typr="text" ng-model="employee.gender"></td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>{{ employee.firstname }}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{ employee.lastname }}</td>
</tr>
<tr>
<td>Gender </td>
<td>{{employee.gender}}</td>
</tr>
</table>
</div>
<script>
var myApp=angular.module("myModule", [])
                                   .controller("myController", function($scope){
var employee={
firstname:"karthik",
lastname:"logan",
gender:"male"
};
$scope.employee=employee;
});
</script>
</body>
</html>


From the above example, you can get a complete idea of angularjs model and angularjs two-way data binding right. If you have any question just comment below.

Related searches:


0 comments:

Post a Comment