Come fare una preselezione per un elenco selezionato generato da AngularJS?

 

Questo crea correttamente un elenco di selezione per scegliere il capitano della squadra. Tuttavia, per impostazione predefinita è selezionata un’opzione vuota. Come possiamo preselezionare il primo giocatore dall’elenco?

  John Bobby  

Ho provato ad aggiungere ng-init="team.captain='0'" ma questo non ha aiutato.

Aggiornamento Apparentemente questo succede perché

un valore referenziato da ng-model non esiste in un insieme di opzioni passate a ng-options.

Fonte: Perché AngularJS include un’opzione vuota in select?

Tuttavia, rimane ancora la domanda sul perché usare ng-init non funzioni?

  

Ecco cosa ha funzionato:

  

E cosa non ha funzionato:

 ng-init="team.captain='0'" ng-init="team.captain='John'" 

La mia ipotesi è che Angular va oltre il semplice confronto di valori o etichette. Probabilmente confronta i riferimenti a oggetti.

Ecco un metodo alternativo per inizializzare un menu a discesa usando AngularJS.

(esempio di lavoro su JS Fiddle: http://jsfiddle.net/galeroy/100ho18L/1/ )

        

Come @camus è già menzionato in un commento, è necessario impostare il modello su un valore “etichetta” valido (o riferimento), non su un valore di indice. Questo è un po ‘strano dato che puoi vedere un valore di indice usato nell’HTML.

Angolare imposta gli attributi del valore nell’HTML come segue:

  • quando si usa array come origine dati, sarà l’indice dell’elemento array in ogni iterazione;
  • quando si usa l’object come origine dati, sarà il nome della proprietà in ogni iterazione.

Quando viene selezionato un elemento, Angular cerca la voce corretta nell’array / object in base all’indice o al nome della proprietà.

Che ne dici di ng-selected , come visto in questo jsfiddle :

  

Ho raggiunto questo objective utilizzando ng-model e ng-options. Fondamentalmente il tuo modello e le opzioni ng dovrebbero essere sincronizzati.

Quando il mio modello (projIndustry in questo caso) è stato inizializzato su un numero, ho dovuto usare ind.ID in ng-options (confronto ID).
Quando il mio modello è stato inizializzato come object, ho dovuto usare ind (object) in ng-options. (Confronto oggetti)