AngularJS – attributo valore per select

I dati JSON di origine sono:

[ {"name":"Alabama","code":"AL"}, {"name":"Alaska","code":"AK"}, {"name":"American Samoa","code":"AS"}, ... ] 

cerco

 ng-options="i.code as i.name for i in regions" 

ma sto ottenendo:

  Alabama Alaska American Samoa 

mentre mi aspetto di ottenere:

 Alabama Alaska American Samoa 

Quindi, come ottenere attributi di valore e sbarazzarsi di “?” articolo?

A proposito, se imposto le $ scope.regions su un JSON statico invece del risultato della richiesta AJAX, l’elemento vuoto scompare.

Quello che hai provato prima dovrebbe funzionare, ma l’HTML non è quello che ci aspetteremmo. Ho aggiunto un’opzione per gestire il caso iniziale “nessun elemento selezionato”:

  
selected: {{region}}

Quanto sopra genera questo HTML:

  

Violino

Sebbene Angular utilizzi numeri interi per il valore, il modello (cioè, $ scope.region) verrà impostato su AL, AK o AS, come desiderato. (Il valore numerico viene utilizzato da Angular per cercare la voce di array corretta quando viene selezionata un’opzione dall’elenco.)

Ciò potrebbe creare confusione quando si apprende innanzitutto come Angular implementa la sua direttiva “seleziona”.

Non puoi davvero farlo a meno che non li costruisci da solo in una ripetizione.

  

MA … probabilmente non ne vale la pena. È meglio lasciare la funzione come progettata e lasciare che Angular gestisca i meccanismi interni. Angular utilizza l’indice in questo modo in modo da poter effettivamente utilizzare un intero object come valore. Quindi puoi usare un collegamento a discesa per selezionare un valore intero piuttosto che una semplice stringa, il che è davvero fantastico:

  {{foo | json}} 

Se si utilizza l’opzione track by , l’attributo value viene scritto correttamente, ad esempio:

 

produce:

  

Se il modello specificato per il menu a discesa non esiste, allora angular genererà un elemento opzioni vuoto. Quindi dovrai specificare esplicitamente il modello sulla selezione in questo modo:

  

Fare riferimento a quanto segue come è stato risposto prima:

Perché AngularJS include un’opzione vuota in select? e questo violino

Aggiornamento: prova questo:

  or  

Si noti che non ci sono elementi opzioni vuoti nella selezione.

È ansible modificare il modello in modo che assomigli a questo:

 $scope.options = { "AL" : "Alabama", "AK" : "Alaska", "AS" : "American Samoa" }; 

Quindi utilizzare

  

Sembra che non sia ansible utilizzare effettivamente il “valore” di una selezione in alcun modo significativo come un normale elemento HTML e collegarlo ad Angular nel modo approvato con ng-options. Come compromesso, alla fine ho dovuto inserire un input nascosto accanto alla mia selezione e farlo tracciare lo stesso modello del mio select, come questo (tutto molto semplificato dal codice di produzione reale per brevità):

HTML:

   

Javascript:

 App.controller('ConnectCtrl',function ConnectCtrl($scope) { $scope.profiles = [{id:'xyz', name:'a profile'},{id:'abc', name:'another profile'}]; $scope.profile = -1; } 

Quindi, nel mio codice lato server ho cercato i params[:profile_id] (questa è stata un’app Rails, ma lo stesso principio si applica ovunque). Poiché l’input nascosto traccia lo stesso modello della selezione, rimangono sincronizzati automaticamente (non è necessario alcun javascript aggiuntivo). Questa è la parte interessante di Angular. Quasi compensa ciò che fa all’attributo value come effetto collaterale.

È interessante notare che ho trovato che questa tecnica funzionava solo con tag di input che non erano nascosti (è per questo che ho dovuto usare il margin-left: -10000px; trucco per spostare l’input fuori dalla pagina). Queste due varianti non hanno funzionato:

  

e

  

Credo che questo significhi che mi manca qualcosa. Sembra strano che sia un problema con Angular.

Puoi usare

 state.name for state in states track by state.code 

Dove stati nell’array JSON, lo stato è il nome della variabile per ogni object nell’array.

Spero che questo ti aiuti

Provalo come di seguito:

 var scope = $(this).scope(); alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));