إن تعلم وإتقان كيفية القيام بمهام يومية معينة باستخدام Angular يمكن أن يعزز حياتك المهنية بسرعة كبيرة ، خاصة إذا كنت جديدًا في . في هذه المقالة ، سنناقش ، حول مهمة واحدة يجب أن يقوم بها المطور آلاف المرات: إنشاء مربع قائمة منسدلة متواضع. سيتم تناول الموضوعات التالية في هذه المدونة:
ما هو الزاوي؟
حسنًا ، إذا كنت تقرأ مدونة حول كيفية إنشاء مربع قائمة منسدلة باستخدام Angular ، فيمكن افتراض أن لديك بالفعل فكرة عامة عن Angular. لأولئك منكم الذين لم يعثروا على هذه المدونة والذين عثروا عليها بسبب أهواء وأهواء الإنترنت ، هو إطار تطوير أمامي. تم تطويره وصيانته بواسطة شركة Google العملاقة للتكنولوجيا. يوفر طريقة معيارية لتطوير تطبيقات الويب أحادية الصفحة مثل Gmail و PayPal و Lego. تقوم التطبيقات التي تم إنشاؤها باستخدام Angular بتنفيذ نهج Model-View-View-Model.
ما هو صندوق القائمة المنسدلة؟
المربع المنسدل هو طريقة نظيفة لإظهار مجموعة من الخيارات حيث يتم عرض خيار واحد فقط في البداية حتى يقوم المستخدم بتنشيط مربع القائمة المنسدلة. لإضافة مربع قائمة منسدلة إلى صفحة ويب ، يمكنك استخدام ملف تحديد عنصر أو أ قائمة الاغراض . تحتاج العلامة الأولى في عنصر التحديد إلى تعيين الخيار المحدد على قيمة المحدد. إليك مقتطف رمز صغير لتوضيح ما أعنيه.
الخيار 1 الخيار 2 الخيار 3
بالطبع ، سيحتاج الكود أعلاه إلى جافا سكريبت الخاص به للحصول على السلوك المتوقع ، لكن الهيكل الأساسي للقائمة المنسدلة يظل كما هو. دعونا نرى كيف نفعل ذلك في Angular الآن.
مربع منسدل باستخدام Angular
بصراحة ، سيكون من الصعب عرض جميع الطرق الممكنة لتنفيذ مربع منسدل في الزاوية. يتعامل عقل كل مطور مع المنطق بطريقته الفريدة وقد رأيت بعض القوائم المنسدلة المجنونة في مسيرتي المهنية. سأكون متواضعا وأريكم يا رفاق نهج القائمة المنسدلة الأساسي.
ما هو التجريد في ++ C
الطريقة الأولى: عمل قائمة منسدلة باستخدام خيارات ng
يمكنك استخدام خيارات ng لإنشاء قائمة منسدلة من مصفوفة أو قائمة عناصر.
ما هو الفرق بين التحميل الزائد والتجاوز
var app = angular.module ('demo'، []) app.controller ('myCtrl'، function ($ range) {$ range.names = ['Demavand'، 'Pradeep'، 'Ashutosh']})الطريقة 2: عمل قائمة منسدلة باستخدام ng-تكرار
الزاوي متنوع ، من الواضح أن لديه عدة طرق لإنشاء قائمة منسدلة أساسية. يكرر التوجيه ng-تكرار كتلة من كود HTML لكل عنصر في مصفوفة ، ويمكن استخدامه لإنشاء خيارات في قائمة منسدلة ، ولكن التوجيه ng-options تم إنشاؤه خصيصًا لملء القائمة المنسدلة بالخيارات وله واحد مهم الميزة ، أي القوائم المنسدلة التي تم إنشاؤها باستخدام خيارات ng تسمح للقيمة المحددة بأن تكون كائنًا ، بينما يجب أن تكون القوائم المنسدلة المكونة من ng-تكرار عبارة عن سلسلة.
ينفذ مقتطف الشفرة هذا نفس القائمة باستخدام ng-تكرار
{{name}} var app = angular.module ('demo'، []) app.controller ('myCtrl'، function ($ range) {$ range.names = ['Demavand'، 'Pradeep'، 'Ashutosh' ]})يقودنا هذا إلى نهاية هذه المدونة القصيرة 'القائمة المنسدلة باستخدام الزاوية'. آمل الآن أن تكون لديك فكرة عن كيفية تنفيذ قائمة منسدلة في مشروعك الخاص. إذا كانت لديك أي شكوك بخصوص هذه المدونة ، يمكنك نشرها كتعليق في قسم التعليقات أدناه. يمكنك أيضًا مشاركة طريقتك الإبداعية الخاصة في إنشاء مربع قائمة منسدلة أيضًا.
إذا كنت ترغب في معرفة المزيد حول إطار العمل Angular ، فراجع الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. سيساعدك هذا التدريب على فهم Angular بعمق ويساعدك على تحقيق إتقان الموضوع.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'Angular Dropdown' وسأعاود الاتصال بك.