Angolare aggiunge strane opzioni nell’elemento select quando si imposta il valore del modello

Ho un elemento select definito come tale:

 Select Country {{country.name}}  

Tutto funziona correttamente quando non imposto alcun tipo di valore nella direttiva che contiene questo elemento di selezione. Ma quando faccio qualcosa come newAddressForm.country_id = 98 , invece di selezionare l’opzione con valore 98, Angular inietta un nuovo elemento nella parte superiore dell’elemento select, in questo modo:

  

Cosa dà? Che tipo di formato è questo e perché succede? Nota che se faccio un console.log(newAddressForm.country_id) nella direttiva, ottengo un normale "98" , è solo strano nell’HTML generato.

Modifica: aggiornamento della situazione. Passato a usare ng-select , ma il problema persiste.

L’elemento strano non appare più, MA, ora c’è un altro elemento in alto, uno che ha solo un punto interrogativo ? come valore e nessuna etichetta.

Ecco, da quello che ho raccolto, l’opzione "none selected" Angular. Ancora non capisco perché non selezionerà l’opzione che gli dico di selezionare, però.

Fare newAddressForm.country_id = 98 continua a non dare risultati. Perché?

Angular non imposta il valore di un elemento select sui valori effettivi dell’array e fa alcune cose interne per gestire il binding dell’ambito. Vedi il primo commento di Mark Rajcok a questo link:

https://docs.angularjs.org/api/ng/directive/select#overview

Quando l’utente seleziona una delle opzioni, Angular utilizza l’indice (o la chiave) per cercare il valore in array (o object) – il valore cercato è quello su cui è impostato il modello. (Quindi, il modello non è impostato sul valore che vedi nel codice HTML! Ciò provoca molta confusione.)

Non sono del tutto sicuro che l’uso di una ng-repeat sia l’opzione migliore.

L’utilizzo della seguente syntax con ng-options risolto questo problema per me:

  

Se i tuoi valori sono numeri interi dovresti usare “” anche se non sono stringhe, questo semplice motivo è esattamente il motivo per cui ottieni un’opzione con un punto interrogativo come valore.

Non dovresti usare questo:

 { value: 0, name: "Pendiente" }, { value: 1, name: "Em andamento" }, { value: 2, name: "Erro" }, { value: 3, name: "Enviar email" }, { value: 4, name: "Enviado" } 

Questo è il modo giusto:

 { value: "0", name: "Pendiente" }, { value: "1", name: "Em andamento" }, { value: "2", name: "Erro" }, { value: "3", name: "Enviar email" }, { value: "4", name: "Enviado" } 

Se hai almeno un record che non sta usando “” lo riceverai? valore dell’opzione.

Mi sono imbattuto in questo stesso problema all’inizio di questa sera, in cui ho visto un’opzione selezionata che appare come la prima nella mia lista anche se non l’ho creata esplicitamente. Stavo compilando un elenco di opzioni selezionate nel mio controller e utilizzando la stessa syntax delle opzioni ng menzionata sopra da jessedvrs (eccetto che stavo anche inserendo l’opzione “select an option” nel controller piuttosto che contrassegnarla nell’HTML come lui era).

Per qualche motivo l’elenco di selezione mostrerebbe sempre un’opzione aggiuntiva a zero dell’indice con un valore di “?”, Ma quando ho cambiato il modo in cui ho riempito la mia opzione predefinita nel controller, questo problema è andato via. Stavo popolando le opzioni selezionate facendo una chiamata API, riempiendole di una promise. Ho fatto l’errore di compilare anche l’opzione predefinita “seleziona un’opzione” come prima cosa che ho fatto in quella promise, ma quando l’ho fatto al di fuori della promise (prima di fare la chiamata API), le opzioni di selezione hanno popolato la strada Li ho calpestati.

Penso che l’opzione jessedvrs sia una soluzione al problema (impostando l’opzione predefinita nel markup HTML), ma se preferisci popolare le opzioni in javascript, ti suggerisco comunque di impostare l’opzione predefinita prima di effettuare qualsiasi chiamata a un’API o processi che potrebbero essere ancora in esecuzione mentre viene eseguito il rendering dell’HTML.

Quando assegni un valore ad un elemento select, AngularJS cerca il valore fornito nell’attributo value dei tag di opzione in quell’elemento select. Ma il problema è che AngularJS esegue un confronto basato sul tipo . Quindi se i valori nei tag di opzione sono stringhe (che di solito è il caso) e la variabile che si associa usando ng-model è un numero, AngularJS non riesce a trovare l’elemento di opzione corrispondente e quindi crea il proprio elemento come questo –

  

La soluzione è, mentre si lega da sola, convertirla nel tipo appropriato.

In questo caso, la soluzione sarebbe quella di associare un intero

  

Se i valori sono impostati come stringhe, il trucco sarebbe da utilizzare

  

Mentre spingiamo i dati sulla variabile scope possiamo usare il seguente codice

 $scope.enquiryLocationRow.push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)}); 

ha risolto il mio problema