At lære og perfektionere, hvordan man udfører bestemte hverdagsopgaver ved hjælp af Angular, kan øge din karriere ret hurtigt, især hvis du er ny i . I denne artikel vil vi diskutere om en sådan opgave, som en udvikler skal have gjort tusinder af tid: at oprette en ydmyg dropdown-boks. Følgende emner vil blive dækket i denne blog:
Hvad er kantet?
Nå, hvis du læser en blog om, hvordan du opretter en dropdown-boks ved hjælp af Angular, kan det antages, at du allerede har en generel idé om Angular. For de af jer, der ikke gør det og har snublet over denne blog på grund af internetets luner og fantasier, er en front-end udviklingsramme. Det er udviklet og vedligeholdt af teknologigiganten Google. Det giver en modulær måde at udvikle enkeltsides webapplikationer som Gmail, PayPal og Lego på. Applikationer bygget med Angular implementerer Model-View-View-Model-tilgangen.
Hvad er en Dropdown Box?
En rulleliste er en ren metode til at vise en række valgmuligheder, da kun ét valg vises oprindeligt, indtil brugeren aktiverer rullemenuen. For at tilføje en dropdown-boks til en webside, skal du bruge en Vælg element eller a listeelement . Det første mærke i det valgte element skal have den valgte indstilling sat til værdien for den valgte. Her er et lille kodestykke, der viser dig, hvad jeg mener.
hvordan man bruger strøm i java
Option 1 Option 2 Option 3
Naturligvis har ovenstående kode brug for sit specifikke javascript for at have forventet adfærd, men det grundlæggende skelet i en rullemenu forbliver den samme. Lad os se, hvordan vi gør det i vinkel nu.
Dropdown Box ved hjælp af kantet
Ærligt talt ville det være ret skræmmende at demonstrere alle de mulige måder at implementere en dropdown-boks i vinkel. Hver udviklers hjerne håndterer logikken på sin egen unikke måde, og jeg har set nogle skøre dropdown-menuer i min karriere. Jeg vil være ydmyg og vise jer en temmelig grundlæggende tilgang til rullemenuen.
Metode 1: Oprettelse af en rulleliste ved hjælp af ng-optioner
Du kan bruge ng-indstillingerne for at oprette en rullemenu ud af en matrix eller liste over emner.
android studio tutorial til begyndere
var app = angular.module ('demo', []) app.controller ('myCtrl', funktion ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metode 2: Oprettelse af en rulleliste ved hjælp af ng-repeat
Vinkel er en alsidig har naturligvis flere måder at oprette en grundlæggende rullemenu på. Direktivet om gentagelse gentager en blok med HTML-kode for hvert element i en matrix, det kan bruges til at oprette indstillinger i en rulleliste, men ng-indstillingsdirektivet blev lavet specielt til at udfylde en rulleliste med indstillinger og har en vigtig fordel dvs. dropdown-menuer lavet med ng-optioner gør det muligt for den valgte værdi at være et objekt, mens dropdowns lavet af ng-repeat skal være en streng.
Dette bestemte kodestykke implementerer den samme liste ved hjælp af ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', funktion ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Dette bringer os til slutningen af denne ret korte blog 'rulleliste ved hjælp af vinkel'. Jeg håber, at du nu har en idé om, hvordan du kunne implementere en rullemenu i dit helt eget projekt. Hvis du er i tvivl om denne blog, kan du sende dem som en kommentar i kommentarfeltet nedenfor. Du kan også dele din egen kreative måde at oprette en rullemenu på.
eksempler på pythonklasser og objekter
Hvis du ønsker at lære mere om Angular framework, så tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning hjælper dig med at forstå vinklet i dybden og hjælper dig med at mestre emnet.
Har du et spørgsmål til os? Nævn det i kommentarfeltet i ”Angular Dropdown”, og jeg vender tilbage til dig.