Une chose à noter est que ngModel est requis pour que les ngOptions fonctionnent... notez l'élément ng-model="blah" qui dit "définir $scope.blah à la valeur sélectionnée".
Essayez ça :
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Voici d'autres informations tirées de la documentation d'Angular (si vous ne les avez pas vues) :
pour les sources de données de type tableau :
- étiquette pour la valeur dans le tableau
- sélectionner comme étiquette pour une valeur dans un tableau
- étiquette groupe par groupe pour la valeur dans le tableau = select as label group by group pour valeur dans tableau
pour les sources de données objet :
- label for (key , value) in object
- select as label for (key , value) in object
- label group by group for (key, value) in object
- select as label group by group for (key, value) in object
EDIT : Pour quelques éclaircissements sur les valeurs des balises d'option dans Angular
Lorsque vous utilisez ng-options , les valeurs des balises d'option écrites par ng-options seront toujours l'index de l'élément du tableau auquel la balise d'option se rapporte. . En effet, Angular vous permet de sélectionner des objets entiers avec des contrôles de sélection, et pas seulement des types primitifs. Par exemple :
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>
Ce qui précède vous permettra de sélectionner un objet entier en $scope.selectedItem directement. Le fait est qu'avec Angular, vous n'avez pas à vous soucier du contenu de votre balise d'option. Laissez Angular s'en occuper, vous ne devez vous préoccuper que de ce qui se trouve dans votre modèle dans votre scope.
Voici un plunker démontrant le comportement ci-dessus, et montrant le html écrit.
EDIT 2 : Traitement de l'option par défaut :
Il y a quelques éléments que j'ai omis de mentionner ci-dessus concernant l'option par défaut.
Sélection de la première option et suppression de l'option vide :
Vous pouvez le faire en ajoutant un simple ng-init qui définit le modèle (de ng-model ) au premier élément dans les éléments que vous répétez dans ng-options :
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Note : cela peut devenir un peu fou si foo est initialisé correctement à quelque chose de "falsy". Dans ce cas, vous devrez gérer l'initialisation de foo dans votre contrôleur, très probablement.
Personnaliser l'option par défaut :
C'est un peu différent, ici tout ce que vous devez faire est d'ajouter une balise d'option comme enfant de votre sélection, avec un attribut de valeur vide, puis de personnaliser son texte interne :
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Remarque : dans ce cas, l'option "vide" restera en place même si vous sélectionnez une autre option. Ce n'est pas le cas du comportement par défaut des sélections sous Angular.
Une option par défaut personnalisée qui disparaît après qu'une sélection a été effectuée :
Si vous souhaitez que votre option par défaut personnalisée disparaisse après la sélection d'une valeur, vous pouvez ajouter un attribut ng-hide à votre option par défaut :
<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>
