Leren en perfectioneren hoe u bepaalde dagelijkse taken kunt uitvoeren met Angular kan uw carrière behoorlijk snel een boost geven, vooral als u nieuw bent in de . In dit artikel zullen we het hebben over een dergelijke taak die een ontwikkelaar duizenden keren moet hebben gedaan: het maken van een eenvoudige vervolgkeuzelijst. In deze blog komen de volgende onderwerpen aan bod:
Wat is hoekig?
Als je een blog leest over het maken van een vervolgkeuzelijst met Angular, dan kan worden aangenomen dat je al een algemeen idee hebt van Angular. Voor degenen onder u die deze blog niet zijn tegengekomen vanwege de grillen en fantasieën van internet, is een front-end ontwikkelingsraamwerk. Het is ontwikkeld en wordt onderhouden door de techgigant Google. Het biedt een modulaire manier om webtoepassingen van één pagina te ontwikkelen, zoals Gmail, PayPal en Lego. Applicaties gebouwd met Angular implementeren de Model-View-View-Model-benadering.
Wat is een vervolgkeuzelijst?
Een vervolgkeuzelijst is een schone methode om een reeks opties weer te geven, aangezien aanvankelijk slechts één keuze wordt weergegeven totdat de gebruiker de vervolgkeuzelijst activeert. Om een dropdown-box aan een webpagina toe te voegen, zou je een selecteer element of een lijst-item . De eerste tag in het select-element moet de geselecteerde optie hebben ingesteld op de waarde van selected. Hier is een klein codefragment om u te laten zien wat ik bedoel.
methode overbelasting en overschrijven in java
Optie 1 Optie 2 Optie 3
Natuurlijk zou de bovenstaande code zijn specifieke javascript nodig hebben om verwacht gedrag te hebben, maar het basisskelet van een vervolgkeuzemenu blijft hetzelfde. Laten we eens kijken hoe we dit nu in Angular doen.
Dropdown Box met Angular
Eerlijk gezegd zou het nogal ontmoedigend zijn om alle mogelijke manieren te demonstreren om een vervolgkeuzelijst in een hoek te implementeren. Het brein van elke ontwikkelaar behandelt de logica op zijn eigen unieke manier en ik heb in mijn carrière een aantal gekke vervolgkeuzemenu's gezien. Ik zal nederig zijn en jullie een vrij eenvoudige dropdown-menu-benadering laten zien.
Methode 1: een vervolgkeuzelijst maken met ng-opties
U kunt de ng-opties gebruiken om een vervolgkeuzemenu te maken uit een array of lijst met items.
python zet getal om in binair
var app = angular.module ('demo', []) app.controller ('myCtrl', functie ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Methode 2: een vervolgkeuzelijst maken met ng-repeat
Hoekig zijn een veelzijdig , heeft uiteraard meerdere manieren om een eenvoudig vervolgkeuzemenu te maken. De ng-repeat-richtlijn herhaalt een blok HTML-code voor elk item in een array, het kan worden gebruikt om opties te maken in een vervolgkeuzelijst, maar de ng-options-richtlijn is speciaal gemaakt om een vervolgkeuzelijst met opties te vullen en heeft één belangrijke voordeel dwz vervolgkeuzemenu's gemaakt met ng-opties staan toe dat de geselecteerde waarde een object is, terwijl vervolgkeuzemenu's gemaakt met ng-herhaal een string moeten zijn.
Dit specifieke codefragment implementeert dezelfde lijst met ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', functie ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Dit brengt ons aan het einde van deze vrij korte blog 'dropdown list using angular'. Ik hoop dat je nu een idee hebt hoe je een vervolgkeuzemenu in je eigen project kunt implementeren. Als je twijfels hebt over deze blog, kun je deze als reactie plaatsen in het commentaargedeelte hieronder. U kunt ook uw eigen creatieve manier delen om een vervolgkeuzelijst te maken.
hoe aws cli te openen
Als je meer wilt weten over Angular framework, bekijk dan onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training zal je helpen Angular diepgaand te begrijpen en je te helpen het onderwerp onder de knie te krijgen.
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van 'Angular Dropdown' en ik neem zo spoedig mogelijk contact met u op.