Come creare una casella a discesa utilizzando Angular?



In questo blog impariamo come creare una semplice casella a discesa utilizzando il framework Angular. La casella a discesa viene creata utilizzando due metodi unici.

Imparare e perfezionare come svolgere determinate attività quotidiane utilizzando Angular può aumentare la tua carriera abbastanza velocemente, soprattutto se sei nuovo nel . In questo articolo, discuteremo di uno di questi compiti che uno sviluppatore deve aver svolto migliaia di volte: creare un'umile casella a discesa. I seguenti argomenti verranno trattati in questo blog:

Cos'è Angular?


Logo angolare - MVC angolare - edurekaBene, se stai leggendo un blog su come creare una casella a discesa utilizzando Angular, si può presumere che tu abbia già un'idea generale di Angular. Per quelli di voi che non lo sanno e si sono imbattuti in questo blog a causa dei capricci e delle fantasie di Internet, è un framework di sviluppo front-end. È sviluppato e gestito dal gigante della tecnologia Google. Fornisce un modo modulare per sviluppare applicazioni web a pagina singola come Gmail, PayPal e Lego. Le applicazioni create utilizzando Angular implementano l'approccio Model-View-View-Model.





istruzione goto in c ++

Cos'è una casella a discesa?

Risultato dellUna casella a discesa è un metodo pulito per mostrare una serie di opzioni poiché inizialmente viene visualizzata solo una scelta fino a quando l'utente non attiva la casella a discesa. Per aggiungere una casella a discesa a una pagina web, dovresti usare un file Selezionare elemento o a voce di elenco . Il primo tag nell'elemento select deve avere l'opzione selected impostata sul valore di selected. Ecco un piccolo snippet di codice per mostrarti cosa intendo.

Opzione 1 Opzione 2 Opzione 3

Ovviamente, il codice sopra avrebbe bisogno del suo javascript specifico per avere un comportamento previsto, ma lo scheletro di base di un menu a discesa rimane lo stesso. Vediamo ora come lo facciamo in Angular.



Casella a discesa utilizzando Angular

Onestamente, sarebbe piuttosto scoraggiante dimostrare tutti i modi possibili per implementare un dropdown-box in angolare. Il cervello di ogni sviluppatore gestisce la logica in un modo unico e ho visto alcuni folli menu a discesa nella mia carriera. Sarò umile e vi mostrerò un approccio al menu a discesa piuttosto semplice.

Metodo 1: creazione di un elenco a discesa utilizzando ng-options

Puoi usare le opzioni ng per creare un menu a discesa da un array o da un elenco di elementi.

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

Metodo 2: creazione di un elenco a discesa utilizzando ng-repeat

Angolare essendo un versatile , ha ovviamente diversi modi per creare un menu a discesa di base. La direttiva ng-repeat ripete un blocco di codice HTML per ogni elemento in un array, puòessere usata per creare opzioni in un elenco a discesa, ma la direttiva ng-optionsèstata fatta specialmente per riempire un elenco a discesa con opzioni e ne ha una importante vantaggio, cioè i menu a discesa realizzati con ng-options consentono al valore selezionato di essere un oggetto, mentre i menu a discesa creati da ng-repeat devono essere una stringa.



Questo particolare frammento di codice implementa lo stesso elenco utilizzando ng-repeat

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

Questo ci porta alla fine di questo blog piuttosto breve 'elenco a discesa utilizzando angolare'. Spero ora che tu abbia un'idea di come potresti implementare un menu a discesa nel tuo progetto. Se hai dei dubbi riguardo a questo blog puoi pubblicarli come commento nella sezione commenti qui sotto. Puoi anche condividere il tuo modo creativo di creare una casella a discesa.

converte la stringa in formato data in java

Se desideri saperne di più sul framework Angular, dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti aiuterà a comprendere in profondità Angular e ti aiuterà a raggiungere la padronanza sull'argomento.

Hai domande per noi? Per favore, menzionalo nella sezione commenti di 'Angular Dropdown' e ti ricontatterò.