ngOpzioni generano opzioni con valori errati

Question

Sto provando a eseguire il rendering della casella di selezione e non funziona come previsto - i valori delle opzioni non sono corretti. Ho controllato manual, in base ad esso la sintassi per array (nel mio caso array di oggetti) è

select as label for value in array 

Così qui è quello che sto facendo:

dati:

[{"id":"3","name":"asdasd","code":"asdads","group":"2","cost":"0"},{"id":"4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}] 

modello :

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products"></select> 

risultato reso:

0.123.

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products" class="ng-pristine ng-valid"> 
    <option value="0" selected="selected">3</option> 
    <option value="1">4</option> 
</select> 

come possiamo vedere, i valori delle opzioni non sono impostati sull'ID delle voci.

Anche questo può non essere corretta sintassi quando la sorgente è array ma i con stessi risultati quando si cerca in questo modo:

<select ng-model="productToBuy" ng-options="item.id as item.id for (key, item) in products"></select> 

metto questo codice jsfiddle. Qualsiasi aiuto apprezzato.

Answer 1

Questo è il comportamento della direttiva ngOptions (l'output visualizzato, dove il valore è l'indice dell'elemento e non la proprietà id che si sta tentando di passare dall'esempio del codice). ngOptions collegherà i dati all'opzione selezionata alla variabile che hai specificato in ngModel. Dovresti quindi lavorare con la tua variabile legata ai dati invece del "valore" dell'elemento opzione stesso.

Html:

<select ng-model="selected" ng-options="item.name for item in items"></select> {{ selected }} 

JS:

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 

Nell'esempio di cui sopra, $ scope.selected rappresenterebbe l'elemento reale selezionato. È quindi possibile accedere a qualsiasi proprietà dell'elemento selezionato: $ scope.selected.name, $ scope.selected.code ... ecc.

Se è necessario preselezionare un elemento con l'esempio precedente, è possibile effettuare le seguenti operazioni :

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 
$scope.selected = $scope.items[1]; // Pre-selected the 2nd item in your array 

Se ancora bisogno di avere il pieno controllo sui tuoi attributi di valore, è meglio utilizzare la direttiva ng-repeat, ma ricordate, se si esegue questa operazione, gli elementi selezionati non saranno dati associati a il tuo modello

EDIT: Nota sulla sintassi 'selezionare come etichetta per valore nella serie':

Nel caso in cui il suo utile, ciò che il vostro "item.id come oggetto.nome per oggetto nei prodotti "stava facendo in realtà impostare la variabile nella direttiva ngModel sul valore specificato nella porzione di selezione della sintassi. Quindi ciò che sta facendo questa espressione è impostare l'etichetta come item.name, ma vincolante $ scope. selezionato per il valore di item.id, piuttosto che per l'intera istanza dell'oggetto stesso.Quindi se il tuo primo elemento negli esempi sopra è stato selezionato, $ scope.selected sarebbe uguale a "3". In realtà non cambia il attributo value dell'elemento dell'opzione stessa

Answer 2

Il proprio tipo di dati nell'oggetto JSON per id è un string e il valore di $scope.selected è integer. Se si passa a uno di essi all'altro funzionerebbe benissimo!

Il valore delle opzioni sarà ancora 0 e 1, ma l'associazione dati del angolare fa il trucco per voi e si lega il valore che avete specificato nella vostra espressione (item.id come item.name) alla ng -modello del tuo elemento genitore (l'elemento select).

Answer 3

Se non avete bisogno di ng-modelselect elemento e si desidera utilizzare il valore selezionato di select elemento, poi attuarlo in questo modo:.

<select> 
    <option ng-repeat="item in items" value="{{item.value}}"> 
    {{item.text}} 
    </option> 
</select>