Att lära sig och perfekta hur man gör vissa vardagliga uppgifter med Angular kan öka din karriär ganska snabbt, särskilt om du är ny i . I den här artikeln kommer vi att diskutera om en sådan uppgift som en utvecklare måste ha gjort tusentals gånger: att skapa en ödmjuk rullgardinsruta. Följande ämnen kommer att behandlas i den här bloggen:
Vad är vinkel?
Om du läser en blogg om hur du skapar en rullgardinsmeny med Angular kan det antas att du redan har en allmän uppfattning om Angular. För de av er som inte har och snubblat över den här bloggen på grund av internetets nycklar och fantasier, är en front-end utvecklingsram. Den utvecklas och underhålls av teknikjätten Google. Det ger ett modulärt sätt att utveckla enkelsidiga webbapplikationer som Gmail, PayPal och Lego. Applikationer byggda med Angular implementerar metoden Model-View-View-Model.
Vad är en Dropdown Box?
En listruta är en ren metod för att visa en rad alternativ eftersom endast ett val visas initialt tills användaren aktiverar listrutan. Om du vill lägga till en listruta på en webbsida använder du en Välj element eller a listobjekt . Den första taggen i det valda elementet måste ha det valda alternativet inställt på det valda värdet. Här är ett litet kodavsnitt som visar vad jag menar.
Alternativ 1 Alternativ 2 Alternativ 3
Naturligtvis skulle ovanstående kod behöva sitt specifika javaskript för att ha förväntat beteende, men det grundläggande skelettet i en rullgardinsmeny förblir densamma. Låt oss se hur vi gör detta i Angular nu.
Listruta med vinkel
Ärligt talat skulle det vara ganska skrämmande att visa alla möjliga sätt att implementera en rullgardinsruta i vinkel. Varje utvecklars hjärna hanterar logiken på sitt eget unika sätt och jag har sett några galna rullgardinsmenyer under min karriär. Jag ska vara ödmjuk och visa er en ganska grundläggande rullgardinsmeny.
skillnad mellan klass och gränssnitt
Metod 1: Gör en rullgardinslista med ng-alternativ
Du kan använda ng-alternativen för att skapa en rullgardinsmeny ur en matris eller lista med objekt.
var app = angular.module ('demo', []) app.controller ('myCtrl', funktion ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metod 2: Gör en rullgardinslista med ng-repeat
Vinkel är en mångsidig , har uppenbarligen flera sätt att skapa en grundläggande rullgardinsmeny. Direktivet om upprepning av ng upprepar ett block med HTML-kod för varje objekt i en matris, det kan användas för att skapa alternativ i en rullgardinslista, men direktivet om alternativ för ng-val gjordes speciellt för att fylla en rullgardinslista med alternativ och har en viktig fördel dvs rullgardinsmenyer gjorda med ng-alternativ gör att det valda värdet kan vara ett objekt, medan rullgardinsmenyer gjorda av ng-repeat måste vara en sträng.
Detta specifika kodavsnitt implementerar samma lista med ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', funktion ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Detta tar oss till slutet av denna ganska korta blogg 'rullgardinslista med vinkel'. Jag hoppas att du nu har en uppfattning om hur du kan implementera en rullgardinsmeny i ditt eget projekt. Om du är osäker på den här bloggen kan du lägga upp dem som en kommentar i kommentarsektionen nedan. Du kan också dela ditt eget kreativa sätt att skapa en rullgardinsruta också.
Om du vill lära dig mer om Angular framework, kolla in vårt som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Den här utbildningen hjälper dig att förstå djupgående vinklar och hjälper dig att behärska ämnet.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i ”Angular Dropdown” så återkommer jag till dig.