ללמוד ולשכלל כיצד לבצע משימות יומיומיות מסוימות באמצעות Angular יכול להגביר את הקריירה שלך די מהר, במיוחד אם אתה חדש בתחום . במאמר זה נדון בנושא משימה אחת כזו שבוודאי מפתח עשה אלפי זמן: יצירת תיבה נפתחת צנועה. הנושאים הבאים יוסקרו בבלוג זה:
מה זה זוויתי?
ובכן, אם אתה קורא בלוג על אופן הכנת תיבה נפתחת באמצעות Angular, ניתן להניח שכבר יש לך מושג כללי על Angular. לאלו מכם שלא נפלו ונקלעו לבלוג זה בגלל הגחמות והמחשבות של האינטרנט, היא מסגרת פיתוח חזיתית. הוא פותח ומתוחזק על ידי ענקית הטכנולוגיה גוגל. הוא מספק דרך מודולרית לפיתוח יישומי אינטרנט בעמודים בודדים כמו Gmail, PayPal ו- Lego. יישומים שנבנו באמצעות Angular מיישמים את גישת Model-View-View-Model.
מה זה big data hadoop
מהי תיבה נפתחת?
תיבה נפתחת היא שיטה נקייה להצגת מערך אפשרויות שכן רק אפשרות אחת מוצגת בתחילה עד שהמשתמש מפעיל את התיבה הנפתחת. כדי להוסיף תיבה נפתחת לדף אינטרנט, השתמש ב בחר אלמנט או א פריט רשימה . התג הראשון ברכיב הנבחר צריך להגדיר את האפשרות שנבחרה לערך הנבחר. הנה קטע קוד קטן כדי להראות לך למה אני מתכוון.
אפשרות 1 אפשרות 2 אפשרות 3
כמובן שהקוד שלעיל יצטרך ש- Javascript הספציפי שלו יתנהג כצפוי, אך השלד הבסיסי של תפריט נפתח נשאר זהה. בואו נראה איך אנחנו עושים זאת בזוויתית עכשיו.
תיבה נפתחת באמצעות זוויתית
בכנות, זה יהיה די מרתיע להפגין את כל הדרכים האפשריות ליישום תיבה נפתחת בזווית. מוח של כל מפתח מטפל בלוגיקה בדרכו הייחודית וראיתי כמה תפריטים נפתחים מטורפים בקריירה שלי. אני הולך להיות צנוע ולהראות לכם גישה די בסיסית בתפריט הנפתח.
שיטה 1: הכנת רשימה נפתחת באמצעות ng-options
אתה יכול להשתמש באפשרויות ng כדי ליצור תפריט נפתח מתוך מערך או רשימת פריטים.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})שיטה 2: הכנת רשימה נפתחת באמצעות ng-repeat
זוויתי להיות תכליתי , ברור שיש דרכים מרובות ליצור תפריט נפתח בסיסי. ההנחיה ng-repeat חוזרת על גוש קוד HTML עבור כל פריט במערך, בעזרתו ניתן ליצור אפשרויות ברשימה נפתחת, אך ההנחיה ng-options נעשתה במיוחד למילוי רשימה נפתחת עם אפשרויות ויש לה אחת חשובות יתרון כלומר תפריטים נפתחים שנעשו עם ng-options מאפשרים לערך שנבחר להיות אובייקט, בעוד שנפתחים מ- ng-repeat צריכים להיות מחרוזת.
קטע קוד מסוים זה מיישם את אותה רשימה באמצעות ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})זה מביא אותנו לסוף הבלוג הקצר למדי 'לרשימה הנפתחת באמצעות זוויתית'. אני מקווה שעכשיו יש לך מושג כיצד תוכל ליישם תפריט נפתח בפרויקט שלך. אם יש לך ספק בנוגע לבלוג זה תוכל לפרסם אותם כהערה בסעיף ההערות למטה. תוכל גם לשתף את הדרך היצירתית שלך ליצור תיבה נפתחת.
אם ברצונך ללמוד עוד על מסגרת זוויתית, עיין בכתובת שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו תעזור לך להבין את זוויתית לעומק ותעזור לך להשיג שליטה בנושא.
יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות של 'זווית נפתחת' ואחזור אליך.