AngularJS Data Binding
Data binding is process of passing data between model and view.In AngularJS ,the HTML part of an application.Each application has its own data template , which is called data model .Both model and view under the same application follow the same data template.Here is a sample data model
var students =
{
Name: "Student1",
Age: 12,
Address: "kolkata",
};
View is indeed HTML part of a page under an AngularJS a application and controller.AngularJS use application data , model, to access both view and application code.You can irate through a collcetion under a view . ng-model bind with input ,select ,textarea control.
AngularJS Data Binding are two way binding.
AngularJS is two way binding, change in one part with reflect the other part of the binding.For example ,if you bind two input , change one input text , will automatically change the text of other input ,no need to handle event "onchange" . This happen as AjgularJs work with DOM.
Example :
Live Example
Data binding is process of passing data between model and view.In AngularJS ,the HTML part of an application.Each application has its own data template , which is called data model .Both model and view under the same application follow the same data template.Here is a sample data model
var students =
{
Name: "Student1",
Age: 12,
Address: "kolkata",
};
View is indeed HTML part of a page under an AngularJS a application and controller.AngularJS use application data , model, to access both view and application code.You can irate through a collcetion under a view . ng-model bind with input ,select ,textarea control.
AngularJS Data Binding are two way binding.
AngularJS is two way binding, change in one part with reflect the other part of the binding.For example ,if you bind two input , change one input text , will automatically change the text of other input ,no need to handle event "onchange" . This happen as AjgularJs work with DOM.
Example :
<div
style="background-color:
#EAEAEA;">
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
mypartone = angular.module("myApp",
[]).controller("myController",
function($scope)
{
var
students =
{
Name:
"Student1",
Age:
12,
Address:
"kolkata",
};
$scope.student
= students;
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
<br
/>
<br
/>
<br
/>
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
</div>
</div>
Live Example
| Name : | |
| Age : | |
| Address : |
| Name : | |
| Age : | |
| Address : |
No comments:
Post a Comment