AngularJS اختر (خانة الاختيار)

السابق: AngularJS تعليمات نانوغرام القيمة

يمكن AngularJS إنشاء قائمة منسدلة من الخيارات لاستخدام صفيف أو كائن.

إنشاء مربع التحديد باستخدام نانوغرام الخيارات

في AngularJS يمكننا استخدامالأوامر الخيار نانوغرام لإنشاء القوائم المنسدلة، عناصر القائمة من خلال الأشياء والمصفوفات دورة الإخراج، التالية أمثلة:

أمثلة

فار التطبيق = angular.module ( 'اسم التطبيق " ، [])؛
app.controller ( 'myCtrl، وظيفة ( $ نطاق) {
$ scope.names = [ "جوجل"، "w3big"، "تاوباو"]؛
})؛

</ script>

محاولة »

نانوغرام الخيارات ونانوغرام تكرار

يمكننا أيضا استخدامالتوجيه-نغ تكرار لإنشاء قائمة منسدلة:

أمثلة

<اختر>
<الخيار نانوغرام تكرار = "س في الأسماء"> {{س}} </ خيار>
</ تحديد>

محاولة »

تعليماتنانوغرام تكرار هو حلقة من خلال مجموعة من التعليمات البرمجية HTML لإنشاء القائمة المنسدلة، ولكن نانوغرام خياراتالأمر أكثر ملاءمة للقائمة المنسدلة خلق، فمن لديه المزايا التالية:

كائنباستخدام خياراتخياراتنانوغرام،نانوغرام تكرار عبارة عن سلسلة.

وينبغي أن تستخدم أيهما أفضل؟

لنفترض أننا استخدام الكائنات التالية:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "w3big", url : "http://www.w3big.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

نانوغرام تكرار له حدوده، وقيمة اختيار عبارة عن سلسلة:

أمثلة

استخدامنانوغرام تكرار:

<اختر نانوغرام طراز = "selectedSite ">
<الخيار نانوغرام تكرار = "س في مواقع" قيمة = "{{x.url}}"> {{x.site}} </ خيار>
</ تحديد>

<H1> اختيارك هو: {{selectedSite}} </ H1>

محاولة »

استخدام خيارات نانوغرام الأوامر، حدد قيمة كائن:

أمثلة

استخدامنانوغرام خيارات:

<تحديد نموذج نانوغرام = "selectedSite " نانوغرام خيارات = "x.site ل x في مواقع">
</ تحديد>

<H1> اختيارك هو: {{selectedSite.site}} </ H1>
<P> عنوان الموقع هو: {{selectedSite.url}} </ P>

محاولة »

عند تحديد القيمة كائن، يمكننا الحصول على مزيد من المعلومات والتطبيقات أكثر مرونة.

كائن مصدر البيانات

المثال السابق نستخدم مجموعة كمصدر بيانات، لدينا الكائنات البيانات التالية كمصدر للبيانات.

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

نانوغرام خيارات استخدام كائنات مختلفة جدا، على النحو التالي:

أمثلة

استخدام الكائن كمصدر بيانات،x هو المفتاح (مفتاح)،ص هو القيمة (القيمة):

<تحديد نموذج نانوغرام = "selectedSite " نانوغرام خيارات = "س ل(س، ص) في مواقع">
</ تحديد>

<H1> قيمة اخترت: {{selectedSite}} </ H1>

محاولة »

اختيارك هو قيمة في أزواج قيمة رئيسي.

ويمكن أيضا أن تكون قيمة في أزواج قيمة رئيسي هدفا:

أمثلة

حدد القيمة في قيمة رئيسي للقيمة، وهو أنه كائن:

$ Scope.cars = {
car01: {العلامة التجارية: "فورد" ، النموذج: "موستانج"، اللون "الأحمر"}،
car02: {العلامة التجارية: "فيات" ، النموذج: "500"، اللون "أبيض"}،
car03: {العلامة التجارية: "فولفو" ، النموذج: "XC90"، اللون "الأسود"}
}؛

محاولة »

لا يجوز استخدام أزواج -value الرئيسية مفتاح، استخدام خصائص كائن مباشرة في القائمة المنسدلة: