Å lære og perfeksjonere hvordan du gjør visse daglige oppgaver ved hjelp av Angular, kan øke karrieren din ganske raskt, spesielt hvis du er ny i . I denne artikkelen vil vi diskutere om en slik oppgave som en utvikler må ha gjort tusenvis av tid: å lage en ydmyk rullegardinboks. Følgende emner vil bli dekket i denne bloggen:
Hva er Angular?
Vel, hvis du leser en blogg om hvordan du lager en rullegardinboks ved hjelp av Angular, kan det antas at du allerede har en generell ide om Angular. For de av dere som ikke gjør det og har snublet over denne bloggen på grunn av internettets luner og fantasier, er en front-end utviklingsramme. Den er utviklet og vedlikeholdt av teknologigiganten Google. Det gir en modulær måte å utvikle ensides webapplikasjoner som Gmail, PayPal og Lego. Applikasjoner bygget med Angular implementerer Model-View-View-Model-tilnærmingen.
Hva er en rullegardinboks?
En rullegardinboks er en ren metode for å vise en rekke valg, siden bare ett valg vises i utgangspunktet til brukeren aktiverer rullegardinboksen. Hvis du vil legge til en rullegardinrute på en webside, bruker du en å velge element eller a listeelement . Den første taggen i elementet select må ha det valgte alternativet satt til verdien av valgt. Her er et lite kodebit for å vise deg hva jeg mener.
mvc arkitektur i java med eksempel
Alternativ 1 Alternativ 2 Alternativ 3
Selvfølgelig vil koden ovenfor trenge sitt spesifikke javascript for å ha forventet oppførsel, men det grunnleggende skjelettet til en rullegardinmeny forblir den samme. La oss se hvordan vi gjør dette i Angular nå.
Nedtrekksboks ved bruk av vinkel
Ærlig talt ville det være ganske skremmende å demonstrere alle mulige måter å implementere en rullegardinrute i vinkel. Hver utviklers hjerne håndterer logikken på sin egen unike måte, og jeg har sett noen sprø rullegardinmenyer i karrieren min. Jeg kommer til å være ydmyk og vise dere en ganske grunnleggende tilnærming til rullegardinmenyen.
Metode 1: Lage en rullegardinliste ved hjelp av ng-opsjoner
Du kan bruke ng-alternativene for å lage en rullegardinmeny ut av en matrise eller liste over elementer.
var app = angular.module ('demo', []) app.controller ('myCtrl', funksjon ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metode 2: Lag en rullegardinliste ved hjelp av ng-repeat
Vinkel er en allsidig , har åpenbart flere måter å lage en grunnleggende rullegardinmeny på. Direktivet om ng-gjenta gjentar en blokk med HTML-kode for hvert element i en matrise, det kan brukes til å opprette alternativer i en rullegardinliste, men ng-alternativ-direktivet ble laget spesielt for å fylle en rullegardinliste med alternativer og har en viktig fordel dvs. rullegardinmenyer laget med ng-alternativer gjør at den valgte verdien kan være et objekt, mens rullegardinmenyene laget av ng-repeat må være en streng.
Denne spesielle kodebiten implementerer den samme listen ved hjelp av ng-repeat
hva er ekko i php
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', funksjon ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Dette bringer oss til slutten av denne ganske korte bloggen 'rullegardinliste ved hjelp av vinkel'. Jeg håper nå har du en ide om hvordan du kan implementere en rullegardinmeny i ditt eget prosjekt. Hvis du er i tvil angående denne bloggen, kan du legge dem ut som en kommentar i kommentarseksjonen nedenfor. Du kan også dele din egen kreative måte å lage en rullegardinboks også.
Hvis du ønsker å lære mer om Angular framework, så sjekk ut vårt som kommer med instruktørstyrt liveopplæring og reell prosjektopplevelse. Denne opplæringen vil hjelpe deg med å forstå Angular dybdegående og hjelpe deg med å mestre emnet.
Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet i ”Angular Dropdown”, så kommer jeg tilbake til deg.