AngularJS သည် Boxes ကိုရွေးချယ်ပါ။
AngularJS သည် သင့်အား array တစ်ခု သို့မဟုတ် အရာဝတ္ထုတစ်ခုပေါ်အခြေခံ၍ dropdown lists များကို ဖန်တီးနိုင်စေပါသည်။
ng-options ကိုအသုံးပြု၍ Select Box တစ်ခုဖန်တီးခြင်း။
AngularJS ရှိ အရာဝတ္ထုတစ်ခု သို့မဟုတ် array တစ်ခုကို အခြေခံ၍ dropdown list တစ်ခုကို ဖန်တီးလိုပါက၊ သင်သည် ng-optionsညွှန်ကြားချက်ကို အသုံးပြုသင့်သည်-
ဥပမာ
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias",
"Linus"];
});
</script>
of-options vs of-repeat
ng-repeatတူညီသော dropdown စာရင်းပြုလုပ်ရန် လမ်းညွှန်ချက်ကို သင်အသုံးပြုနိုင်သည် -
ဥပမာ
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
ng-repeatညွှန်ကြားချက်သည် array တစ်ခုစီရှိ item တစ်ခုစီအတွက် HTML ကုဒ်တစ်ခုကို ထပ်ခါထပ်ခါပြုလုပ်သော ကြောင့် ၊ dropdown list တစ်ခုတွင် ရွေးချယ်စရာများဖန်တီးရန် အသုံးပြုနိုင်ပြီး၊ ng-optionsအထူးသဖြင့် dropdown list ကို ရွေးချယ်စရာများဖြင့် ဖြည့်ရန်အတွက် ညွှန်ကြားချက်ကို ပြုလုပ်ထားခြင်းဖြစ်သည်။
ငါဘာကိုသုံးတာလဲ။
ng-repeatညွှန်ကြားချက်နှင့် ညွှန်ကြားချက် နှစ်မျိုးလုံးကို သင်အသုံးပြုနိုင်သည် ng-options-
သင့်တွင် အရာဝတ္ထုများ၏ array တစ်ခုရှိသည်ဟု ယူဆပါ-
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
ဥပမာ
အသုံးပြုခြင်း ng-repeat-
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
တန်ဖိုးကို အရာဝတ္ထုတစ်ခုအဖြစ် အသုံးပြုသောအခါ၊ ng-valueအစား value:
ဥပမာ
ng-repeatအရာဝတ္ထုအဖြစ် အသုံးပြုခြင်း
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
ဥပမာ
အသုံးပြုခြင်း ng-options-
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
ရွေးချယ်ထားသောတန်ဖိုးသည် အရာဝတ္ထုတစ်ခုဖြစ်သောအခါ၊ ၎င်းသည် အချက်အလက်ပိုမိုသိမ်းဆည်းနိုင်ပြီး သင်၏အပလီကေးရှင်းသည် ပိုမိုပြောင်းလွယ်ပြင်လွယ်ရှိနိုင်သည်။
ng-optionsကျွန်ုပ်တို့သည် ဤသင်ခန်းစာတွင် ညွှန်ကြားချက်ကို အသုံးပြုပါမည် ။
အရာဝတ္ထုတစ်ခုအနေဖြင့် ဒေတာအရင်းအမြစ်
ယခင်နမူနာများတွင် data source သည် array တစ်ခုဖြစ်သည်၊ သို့သော် object တစ်ခုကိုလည်း သုံးနိုင်သည်။
သင့်တွင် သော့တန်ဖိုးအတွဲများပါသည့် အရာဝတ္ထုတစ်ခုရှိသည်ဟု ယူဆပါ-
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
ရည်ညွှန်းချက် ရှိ စကားရပ်သည် ng-optionsအရာဝတ္ထုများအတွက် အနည်းငယ်ကွဲပြားသည်-
ဥပမာ
ဒေတာအရင်းအမြစ်အဖြစ် အရာဝတ္တုကို အသုံးပြု၍ xသော့ကို
y
ကိုယ်စားပြုပြီး တန်ဖိုးကို ကိုယ်စားပြုသည်-
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
ရွေးချယ်ထားသောတန်ဖိုး သည် သော့ တန်ဖိုး အတွဲ တစ်ခုတွင် အမြဲတမ်း တန်ဖိုး ဖြစ်လိမ့်မည်။
သော့ တန်ဖိုး အတွဲ တွင် တန်ဖိုး သည် အရာဝတ္ထုတစ်ခုလည်း ဖြစ်နိုင်သည်-
ဥပမာ
ရွေးချယ်ထားသောတန်ဖိုး သည် သော့ တန်ဖိုး အတွဲတစ်ခုတွင် တန်ဖိုးရှိ နေမည်ဖြစ်ပြီး ၊ ဤတစ်ကြိမ်သာ ၎င်းသည် အရာဝတ္ထုတစ်ခုဖြစ်သည်-
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
dropdown list မှရွေးချယ်မှုများသည် key -value pair တစ်ခုတွင် သော့ ဖြစ်ရန်မလိုအပ်ပါ၊ ၎င်းသည်လည်းတန်ဖိုး၊ သို့မဟုတ်တန်ဖိုးအရာဝတ္ထု၏ပိုင်ဆိုင်မှုတစ်ခုလည်းဖြစ်နိုင်သည်-
ဥပမာ
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>