AngularJS Data Binding
AngularJS တွင် Data binding သည် model နှင့် view အကြား ထပ်တူပြုမှုဖြစ်သည်။
ဒေတာမော်ဒယ်
AngularJS အပလီကေးရှင်းများတွင် အများအားဖြင့် ဒေတာပုံစံတစ်ခုရှိသည်။ ဒေတာမော်ဒယ်သည် အပလီကေးရှင်းအတွက် ရရှိနိုင်သော အချက်အလက်အစုအဝေးတစ်ခုဖြစ်သည်။
ဥပမာ
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML မြင်ကွင်း
AngularJS အပလီကေးရှင်းကိုပြသသည့် HTML ကွန်တိန်နာကို view ဟုခေါ်သည်။
မြင်ကွင်းသည် မော်ဒယ်သို့ ဝင်ရောက်ခွင့်ရှိပြီး မြင်ကွင်းတွင် မော်ဒယ်ဒေတာကို ပြသရန် နည်းလမ်းများစွာ ရှိပါသည်။
ng-bindသင်သည် သတ်မှတ်ထားသော မော်ဒယ်ပိုင်ဆိုင်မှုနှင့် ဒြပ်စင်၏ အတွင်း HTML ကို ချည်နှောင်မည့် ညွှန်ကြားချက်ကို သင်အသုံးပြုနိုင်သည် -
ဥပမာ
<p ng-bind="firstname"></p>
မော်ဒယ်မှ အကြောင်းအရာကို ပြသရန် နှစ်ထပ်ညှပ်များကိုလည်း သုံးနိုင်သည် -{{ }}
ဥပမာ
<p>First name: {{firstname}}</p>
ng-modelသို့မဟုတ် မော်ဒယ်ကို မြင်ကွင်းတွင် ချိတ်ရန် HTML ထိန်းချုပ်မှုဆိုင်ရာ ညွှန်ကြားချက်ကို သင် အသုံးပြုနိုင်သည် ။
ng-modelညွှန်ကြားချက် _
ng-modelမော်ဒယ်မှဒေတာများကို HTML ထိန်းချုပ်မှုများရှိ မြင်ကွင်းသို့ ချိတ်ဆက်ရန် ညွှန်ကြားချက်ကို အသုံးပြု ပါ (ထည့်သွင်းရန်၊ ရွေးချယ်ရန်၊ စာသားဧရိယာ)
ဥပမာ
<input ng-model="firstname">
လမ်းညွှန်ချက် သည် ng-modelမော်ဒယ်နှင့် မြင်ကွင်းကြားတွင် နှစ်လမ်းသွား ချိတ်ဆက်မှုကို ပေးသည်။
နှစ်လမ်းချိတ်
AngularJS တွင် Data binding သည် model နှင့် view အကြား ထပ်တူပြုမှုဖြစ်သည်။
မော်ဒယ် ရှိ ဒေတာများ ပြောင်းလဲ သည့်အခါ၊ မြင်ကွင်း သည် အပြောင်းအလဲကို ရောင်ပြန်ဟပ်ကာ၊ မြင်ကွင်း ရှိ ဒေတာများ ပြောင်းလဲ သည့်အခါ မော်ဒယ် ကိုလည်း မွမ်းမံထားသည်။ ၎င်းသည် ချက်ခြင်း အလိုအလျောက် ဖြစ်ပျက်ပြီး မော်ဒယ်နှင့် မြင်ကွင်းကို အချိန်တိုင်း အပ်ဒိတ်လုပ်ကြောင်း သေချာစေသည်။
ဥပမာ
<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
= "John";
$scope.lastname = "Doe";
});
</script>
AngularJS Controller
AngularJS ရှိ အပလီကေးရှင်းများကို ထိန်းချုပ်ကိရိယာများဖြင့် ထိန်းချုပ်ထားသည်။ AngularJS Controllers အခန်း တွင် ထိန်းချုပ်ကိရိယာများအကြောင်း ဖတ်ပါ ။
မော်ဒယ်နှင့် မြင်ကွင်းကို ချက်ခြင်း ထပ်တူပြုခြင်းကြောင့်၊ ထိန်းချုပ်ကိရိယာကို မြင်ကွင်းနှင့် လုံးလုံးလျားလျား ခွဲထုတ်နိုင်ပြီး မော်ဒယ်ဒေတာကို ရိုးရှင်းစွာ အာရုံစိုက်နိုင်သည်။ AngularJS တွင် data binding ကြောင့်၊ view သည် controller တွင်ပြုလုပ်ထားသော မည်သည့်ပြောင်းလဲမှုများကိုမဆို ထင်ဟပ်စေမည်ဖြစ်သည်။
ဥပမာ
<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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>