डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Data Binding

Data Binding में data synchronization होता है | ये synchronization Model और View के बीच में होता है |

Types of Data Binding in AngularJS

  1. One-Way Data Binding
  2. Two-Way Data Binding

One-Way Data Binding in AngularJS

One-Way Data Binding में Data Model को automatically change नहीं होता है | इसमे Data Model को change करने के लिए हर वक्त code को update करना पड़ता है |

One-Way Binding में Data synchronization process नहीं होती है |

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">
<div>Message: {{message}}</div>
<div ng-bind="'Message : ' + message"></div>
</div>

<script type="text/javascript">
var myapp = angular.module('app', []);
myapp.controller('ctrl', function ($scope){
	$scope.message = "Hello World";
});
</script>

</body>
</html>
Output :
Message : Hello World
Message : Hello World

उपरवाले example में Javascript के <script> पर दिए हुए code को Data Model कहते है और Application को execute किये जानेवाले code को View कहते है |

Example में message ये सिर्फ एक ही Model की value ली गयी है | जब page को execute या load किया जायेगा तब {{message}} और ng-bind='Messa...' इनके values को display किया जाएगा |



Two-Way Data Binding in AngularJS

One-Way Data Binding में Data Model को automatically change होता है | इसमे Data Model को change करने के लिए हर वक्त code को update नहीं करना पड़ता है |

One-Way Binding में Data synchronization process होती है |

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">
Enter Message: <input type="text" ng-model="message" />
<div>Entered Message: {{message}}</div>
<div ng-bind="'Entered Message : ' + message"></div>
</div>

<script type="text/javascript">
var myapp = angular.module('app', []);
myapp.controller('ctrl', function ($scope) {
	$scope.message = "Hello World";
});
</script>

</body>
</html>
Output :
Enter Message:
Entered Message: {{message}}

उपरवाले Example में जैसे-जैसे User कुछ value input करेगा वैसे-वैसे automatically message की model value को change किया जायेगा |

Example ng-model ये HTML Form Elements की value को AngularJS Application पर bind करके रखता है |