AngularJS డేటా బ్యాండ్లింగ్

ఆంగులర్ జెఎస్ లో డాటా బైండింగ్ మోడల్ మరియు వీక్షణ మధ్య సమన్వయం.

డాటా మోడల్

ఆంగులర్ జెఎస్ అప్లికేషన్స్ కి ఒక డాటా మోడల్ ఉంటుంది. డాటా మోడల్ అనేది అప్లికేషన్స్ కొరకు ఉపయోగపడే సమాచారాల సమూహం.

ఇన్స్టాన్స్

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

హ్టిఎంఎల్ వీక్షణ

ఆంగులర్ జెఎస్ అప్లికేషన్స్ యొక్క హ్టిఎంఎల్ కంటైనర్ వీక్షణ అని పిలుస్తారు.

వీక్షణ మోడల్ ను ప్రాప్యం చేస్తుంది, మరియు వీక్షణలో మోడల్ సమాచారాన్ని చూపించడానికి అనేక మార్గాలు ఉన్నాయి.

మీరు ఉపయోగించవచ్చు ng-bind సూచన, ఇది పెరియల్ ఐన్నర్ ఐఎచ్టిఎమ్ఎల్ ను ప్రస్తుత మోడల్ అటీరిబ్యూట్ తో బైండ్ చేస్తుంది:

ఇన్స్టాన్స్

<p ng-bind="firstname"></p>

స్వయంగా ప్రయత్నించండి

మీరు పరిమిత ద్విభాషాకారణాలు ఉపయోగించవచ్చు {{ }} మీరు మోడల్ లో ఉన్న సమాచారాన్ని చూపించడానికి

ఇన్స్టాన్స్

<p>First name: {{firstname}}</p>

స్వయంగా ప్రయత్నించండి

లేదా, మీరు హ్టిఎంఎల్ కంట్రోల్స్ పై ఉపయోగించవచ్చు ng-model సూచనలు మోడల్ ను వీక్షణకు బైండ్ చేస్తాయి.

ng-model సూచన

ఉపయోగించండి ng-model సూచనలు మోడల్ లో సమాచారాన్ని హ్టిఎంఎల్ కంట్రోల్స్ (input, select, textarea) వీక్షణకు బైండ్ చేస్తాయి.

ఇన్స్టాన్స్

<input ng-model="firstname">

స్వయంగా ప్రయత్నించండి

ng-model సూచనలు మోడల్ మరియు వీక్షణ మధ్య ద్వంద్వ బైండింగ్ అందిస్తాయి.

ద్వంద్వ బైండింగ్

ఆంగులర్ జెఎస్ లో డాటా బైండింగ్ మోడల్ మరియు వీక్షణ మధ్య సమన్వయం.

మోడల్ లో సమాచారం మార్పు జరగబోయినప్పుడు, వీక్షణ ఆ మార్పును ప్రతిబింబిస్తుంది, మరియు వీక్షణ లో సమాచారం మార్పు జరగబోయినప్పుడు, మోడల్ కూడా నవీకరిస్తుంది. ఇది తక్షణంగా మరియు స్వయంచాలకంగా జరుగుతుంది, దీని కారణంగా మోడల్ మరియు వీక్షణ ఎల్లప్పుడూ నవీకరించబడతాయి.

ఇన్స్టాన్స్

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

స్వయంగా ప్రయత్నించండి

AngularJS కంట్రోలర్స్

ఆంగులర్ జెఎస్ లో అప్లికేషన్స్ కంట్రోలర్ ద్వారా నియంత్రించబడతాయి. కంట్రోలర్ సంబంధిత విషయాలను ఆంగులర్ జెఎస్ కంట్రోలర్ చిప్పులో చదవండి.

మోడల్ మరియు వీక్షణ సమాచారం తక్షణ సమన్వయం కారణంగా, కంట్రోలర్ వీక్షణతో పూర్తిగా వేరుగా ఉండగలదు, మరియు మాత్రమే మోడల్ సమాచారం పై దృష్టి సారించాలి. ఆంగులర్ జెఎస్ లో డాటా బైండింగ్ కారణంగా, వీక్షణ కంట్రోలర్ లో చేసిన ఏ మార్పులను కూడా ప్రతిబింబిస్తుంది.

ఇన్స్టాన్స్

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

స్వయంగా ప్రయత్నించండి