Una cosa da notare è che ngModel è necessario per far funzionare ngOptions ... nota ciò ng-model="blah"che dice "imposta $ scope.blah sul valore selezionato".
Prova questo:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Ecco altro dalla documentazione di AngularJS (se non l'hai ancora visto):
per origini dati array:
- etichetta per valore nella matrice
- selezionare come etichetta per valore nella matrice
- etichetta gruppo per gruppo per valore in matrice = seleziona come etichetta gruppo per gruppo per valore in matrice
per origini dati oggetto:
- etichetta per (chiave, valore) nell'oggetto
- seleziona come etichetta per (chiave, valore) nell'oggetto
- etichetta gruppo per gruppo per (chiave, valore) nell'oggetto
- selezionare come etichetta gruppo per gruppo per (chiave, valore) nell'oggetto
Per alcuni chiarimenti sui valori dei tag delle opzioni in AngularJS:
Quando si utilizza ng-options, i valori dei tag di opzione scritti da ng-options saranno sempre l'indice dell'elemento dell'array a cui si riferisce il tag di opzione . Questo perché AngularJS in realtà ti consente di selezionare interi oggetti con controlli di selezione e non solo tipi primitivi. Per esempio:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Quanto sopra ti permetterà di selezionare direttamente un intero oggetto $scope.selectedItem. Il punto è, con AngularJS, non devi preoccuparti di cosa c'è nel tuo tag opzione. Lascia che AngularJS lo gestisca; dovresti preoccuparti solo di ciò che è nel tuo modello nel tuo ambito.
Ecco un plunker che dimostra il comportamento sopra e mostra l'HTML scritto
Trattare con l'opzione predefinita:
Ci sono alcune cose che non ho menzionato sopra relative all'opzione predefinita.
Selezione della prima opzione e rimozione dell'opzione vuota:
Puoi farlo aggiungendo un semplice ng-initche imposta il modello (da ng-model) al primo elemento negli elementi in cui si ripete ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Nota: questo potrebbe diventare un po 'folle se foosembra essere inizializzato correttamente in qualcosa di "falso". In tal caso, ti consigliamo di gestire l'inizializzazione foonel tuo controller, molto probabilmente.
Personalizzazione dell'opzione predefinita:
Questo è un po 'diverso; qui tutto ciò che devi fare è aggiungere un tag opzione come figlio di tua scelta, con un attributo di valore vuoto, quindi personalizzarne il testo interno:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Nota: in questo caso l'opzione "vuota" rimarrà lì anche dopo aver selezionato un'opzione diversa. Questo non è il caso del comportamento predefinito di selezioni in AngularJS.
Un'opzione predefinita personalizzata che si nasconde dopo aver effettuato una selezione:
Se desideri che l'opzione predefinita personalizzata scompaia dopo aver selezionato un valore, puoi aggiungere un attributo ng-hide all'opzione predefinita:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>