AngularJS 下拉框
- အရေးပါသောပါ AngularJS တော်လှောင်
- နောက်ပိုင်းပါ AngularJS SQL
AngularJS 允许您基于数组或对象中的项目创建下拉列表。
使用 ng-options 创建下拉框
如果您想在 AngularJS 中基于对象或数组创建下拉列表，应该使用 ng-options အမိန့်:
အမှတ်အသား
ng-options 与 ng-repeat
您也可以使用 ng-repeat 指令来创建相同的下拉列表：
အမှတ်အသား
由于 ng-repeat 指令为数组中的每个项目重复一段 HTML 代码，因此它可用于在下拉列表中创建选项，但是 ng-options အမိန့် သည် နှီးနှောက် စာရင်း တွင် ဖြည့်စွက် ရန် ဖြည့်စွက် ရေး အတွက် ဖြည့်စွက် ပြီးခဲ့သည့် အမိန့် ဖြစ်ပါသည်。
သို့မဟုတ် အမိန့် မှာ ဘယ်အမိန့် ကို အသုံးပြုရမည်လား？
သင် အသုံးပြုနိုင်သည် ng-repeat အမိန့် နှင့် ng-options အမိန့်:
假设您有一个对象数组：
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
အမှတ်အသား
使用 ng-repeat：
当使用值作为对象时，使用 ng-value 代替 value：
အမှတ်အသား
将 ng-repeat 用作对象：
အမှတ်အသား
使用 ng-options：
当所选值为对象时，它可以包含更多信息，并且您的应用程序可以更加灵活。
我们将在本教程中使用 ng-options အမည်
အရာဝတ္တု အစီအစဉ် အဖြစ်
အရင်အမှတ်ပြုထားသော အရာဝတ္တု အစီအစဉ် သည် အစီအစဉ် ဖြစ်ပါ၍ အခြား အစီအစဉ် ကို အသုံးပြုနိုင်ပါ
ခန့်မှန်းကျသည်ကို အမှတ်ပြုပါ၊ ကိန်းအမှတ်-အကျယ်း ပေါင်းစုံ တစ်ခု ရှိသည်
$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"}
};
နှင့်ပြတ် ကဲ့သို့ လိပ်အမှတ် တွင် အရွေးချယ်ရာ အရွေးချယ်များ အကြောင်းကြားသည်။ကိုယ်စားသို့မဟုတ် အသုံးပြုနိုင်သော အကျဉ်းအစား သို့မဟုတ် အကျဉ်းအစား အိမ်အခြား အချက်အလက်များ ဖြစ်နိုင်ပါသည်:
အမှတ်အသား
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select>
- အရေးပါသောပါ AngularJS တော်လှောင်
- နောက်ပိုင်းပါ AngularJS SQL
