AngularJS SELECT (حدد المربع)
يمكن لـ AngularJS استخدام المصفوفات أو الكائنات لإنشاء خيار قائمة منسدلة.
استخدم خيارات NG لإنشاء مربع تحديد
في AngularJS ، يمكننا استخدام توجيه NG-Resption لإنشاء قائمة منسدلة ، وعناصر القائمة هي حلقة الإخراج من خلال الكائنات والصفائف ، كما هو موضح في المثال التالي:
مثال
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <select ng-model = "selectName" ng-options = "x for x in names"> </select> </viv> <script> var app = angular.module ('myapp' ، []) ؛ "taobao"] ؛}) ؛ </script> <p> يوضح هذا المثال استخدام توجيه NG-Roptions. </p> </body> </html>نتائج التشغيل:
يوضح هذا المثال استخدام توجيه NG-Roptions.
NG-Riftions و NG-Repeat
يمكننا أيضًا استخدام توجيه NG-Repeat لإنشاء قائمة منسدلة:
مثال
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <select> <option ng-repeat = "x in names"> {{x}} </soph> </select> </viv> <script> var app = angular.module ('myapp' ، []) ؛ "Taobao"] ؛}) ؛ </script> <p> يوضح هذا المثال باستخدام توجيه Ng-Repeat لإنشاء قائمة منسدلة. </p> </body> </html>نتائج التشغيل:
يوضح هذا المثال باستخدام توجيه NG-Repeat لإنشاء قائمة منسدلة.
يستخدم توجيه NG-Repeat صفيفًا لحلق رمز HTML لإنشاء قوائم منسدلة ، لكن توجيه NG-Options أكثر ملاءمة لإنشاء قوائم منسدلة ، ولديه المزايا التالية:
كائن يستخدم خيار NG-Options ، NG-Repeat هو سلسلة.
أي واحد يجب أن يكون أفضل؟
لنفترض أننا نستخدم الكائن التالي:
$ scope.sites = [{site: "google" ، url: "http://www.google.com"} ، {site: "runoob" ، url: "http://www.runoob.com"} ، {site: "taobao" ، url: "http://www.taoba.تكرار NG له قيود ، والقيمة المحددة هي سلسلة:
مثال
استخدم NG-Repeat:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> حدد موقع ويب: </p> <حدد ng-model = "selectsite"> <orpoy ng-repeat = "x in sites" value = "{{x.url}}"> {x.site}}} {{selectsite}} </h1> </viv> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.sites = [{site: "google" ، url: "http://www.runoob.com"} ، {site: "taobao" ، url: "http://www.taobao.com"}] ؛}) ؛ </script> <p> يوضح هذا المثال باستخدام NG-repeative لإنشاء قائمة ، والقيمة المحددة هي سلسلة. </p> </body> </html>تأثير الجري:
حدد موقع ويب:
اختيارك هو: http://www.google.com
يوضح هذا المثال باستخدام توجيه NG-Repeat لإنشاء قائمة منسدلة ، حيث تكون القيمة المحددة عبارة عن سلسلة.
باستخدام توجيه NG-Options ، فإن القيمة المحددة هي كائن:
مثال
استخدم خيارات NG:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> حدد موقع ويب: </p> <select ng-model = "selectsite" ng-options = "x.site for x in sites"> </select> <h1> لقد اخترت: {{selectsite.site}}} {{selectsite.url}} </p> </viv> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.sites = [{site: "google" ، url: "http://www "http://www.runoob.com"} ، {site: "taobao" ، url: "http://www.taobao.com"}] ؛ </p> </body> </html>تأثير الجري:
حدد موقع ويب:
اخترت: جوجل
عنوان URL هو: http://www.google.com
يوضح هذا المثال باستخدام توجيه NG-Roptions لإنشاء قائمة منسدلة ، مع كون القيمة المحددة كائنًا.
عند تحديد قيمة ككائن ، يمكننا الحصول على مزيد من المعلومات والتطبيق أكثر مرونة.
مصدر البيانات ككائن
في المثال السابق ، استخدمنا المصفوفات كمصدر للبيانات ، و أدناه استخدمنا كائنات البيانات كمصدر للبيانات.
$ scope.sites = {site01: "Google" ، site02: "runoob" ، site03: "taobao"} ؛تستخدم NG-Options كائنات مختلفة تمامًا ، على النحو التالي:
مثال
استخدم كائنًا كمصدر للبيانات ، x هو المفتاح و y هو القيمة:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> الموقع الذي حددته هو: </p> <select ng-model = "selectsite" ng-options = "x for (x ، y) in sites"> </select> <h1> القيمة التي حددتها هي: {{selectsite}} </h1> </div> </p> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.sites = {site01: "Google" ، site02: "runoob" ، site03: "taobao"} ؛} ؛تأثير الجري:
الموقع المحدد هو:
القيمة التي حددتها هي: Google
يوضح هذا المثال استخدام الكائنات كقائمة إنشاء المنسدلة.
القيمة التي حددتها هي القيمة في زوج القيمة الرئيسية.
يمكن أن تكون القيمة أيضًا كائنًا في زوج القيمة الرئيسية:
مثال
القيمة المحددة في قيمة زوج القيمة الرئيسية ، وهو كائن:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> حدد سيارة: </p> <حدد ng-model = "selectcar" ng-options = "x for (x ، y) in cars"> </select> <h1> يمكنك اختيار: {{selectcar.rod}}}} </h1> <h2> {{selectcar.model}} </h2> <h3> اللون: {{selectcar.color}} </h3> <p> لاحظ أن القيمة المحددة هي كائن. </p> </viv> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.cars = {car01: {brand: "ford" ، model: Car03: {Brand: "Volvo" ، Model: "XC90" ، اللون: "أسود"}}) ؛ </script> </body> </html>نتائج التشغيل:
اختر سيارة
اخترت: فيات
النموذج: 500
اللون: أبيض
ملاحظة: القيمة المحددة هي كائن.
يمكنك أيضًا استخدام المفتاح في زوج القيمة المفاتيح بدلاً من استخدام زوج القيمة المفاتيح ، واستخدام خصائص الكائن مباشرة:
مثال:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> حدد سيارة: </p> <select ng-model = "selectcar" ng-options = "y.brand for (x ، y) in cars"> </select> <p> لقد اخترت: {{selectcar.model}} </p> <p> اللون هو: {{selectcar.color}} </p> يمكن أن تكون الخيارات في القائمة المنسدلة أيضًا سمات للكائن. </p> </viv> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.cars = {car01: {brand: "ford" ، model: Car03: {Brand: "Volvo" ، Model: "XC90" ، اللون: "أسود"}}) ؛ </script> </body> </html>نتائج التشغيل:
اختر سيارة:
اختيارك هو: فورد
النموذج: موستانج
اللون هو: أحمر
يمكن أن تكون الخيارات في القائمة المنسدلة أيضًا سمات للكائنات.
ما سبق هو عبارة عن مجموعة من معلومات AngularJS ، وسنستمر في إضافتها لاحقًا. آمل أن تساعد الأصدقاء المحتاجين.