Com es crea un quadre desplegable amb Angular?



En aquest bloc aprenem a crear un quadre desplegable senzill mitjançant el marc Angular. El quadre desplegable es crea mitjançant dos mètodes únics.

Aprendre i perfeccionar com fer determinades tasques diàries amb Angular pot augmentar la vostra carrera bastant ràpidament, sobretot si sou nous a la . En aquest article, parlarem d’una tasca d’aquest tipus que un desenvolupador ha d’haver fet milers de temps: crear un humil quadre desplegable. En aquest bloc es tractaran els temes següents:

Què és Angular?


Logotip angular - MVC angular: edurekaBé, si llegiu un bloc sobre com fer un quadre desplegable amb Angular, es pot suposar que ja teniu una idea general d’Angular. Per a aquells que no ho feu i heu topat amb aquest blog a causa dels capricis i les fantasies d’Internet, és un marc de desenvolupament frontal. És desenvolupat i mantingut pel gegant tecnològic Google. Proporciona una manera modular de desenvolupar aplicacions web d’una sola pàgina com Gmail, PayPal i Lego. Les aplicacions construïdes mitjançant Angular implementen l'enfocament Model-Vista-Vista-Model.





Què és un quadre desplegable?

Resultat de la imatge de la icona del menú desplegableUn quadre desplegable és un mètode net per mostrar una matriu d'opcions, ja que només es mostra una opció inicialment fins que l'usuari activa el quadre desplegable. Per afegir un quadre desplegable a una pàgina web, heu d'utilitzar un fitxer seleccioneu element o a element de llista . La primera etiqueta de l'element de selecció ha de tenir l'opció seleccionada establerta al valor de seleccionat. Aquí teniu un petit fragment de codi per mostrar-vos el que vull dir.

Opció 1 Opció 2 Opció 3

Per descomptat, el codi anterior necessitaria el seu javascript específic per tenir un comportament esperat, però l’esquelet bàsic d’un menú desplegable continua sent el mateix. Vegem com ho fem ara a Angular.



algorismes i estructures de dades a Java

Quadre desplegable mitjançant Angular

Sincerament parlant, seria bastant descoratjador demostrar totes les maneres possibles d'implementar una caixa desplegable en forma angular. El cervell de tots els desenvolupadors gestiona la lògica de la seva manera única i he vist alguns menús desplegables bojos a la meva carrera. Seré humil i us mostraré un enfocament bàsic del menú desplegable.

Mètode 1: fer una llista desplegable mitjançant ng-options

Podeu utilitzar les opcions ng per crear un menú desplegable d'una matriu o llista d'elements.

var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})

Mètode 2: fer una llista desplegable amb ng-repeat

Ser angular és versàtil , òbviament, té diverses maneres de crear un menú desplegable bàsic. La directiva ng-repeat repeteix un bloc de codi HTML per a cada element d’una matriu, es pot utilitzar per crear opcions en una llista desplegable, però la directiva ng-options es va fer especialment per omplir una llista desplegable d’opcions i en té una important avantatge, és a dir, els menús desplegables fets amb ng-options permeten que el valor seleccionat sigui un objecte, mentre que els desplegables fets amb ng-repeat han de ser una cadena.



Aquest fragment de codi concret implementa la mateixa llista mitjançant ng-repeat

{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})

Això ens portarà al final d'aquesta 'llista desplegable amb angular' del bloc, bastant breu. Espero que ara tingueu una idea de com podeu implementar un menú desplegable al vostre propi projecte. Si teniu dubtes sobre aquest bloc, podeu publicar-los com a comentari a la secció de comentaris següent. També podeu compartir la vostra manera creativa de crear un quadre desplegable.

Si voleu obtenir més informació sobre el marc angular, consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us ajudarà a comprendre en profunditat Angular i us ajudarà a dominar el tema.

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de 'Menú desplegable angular' i us respondré.