Une chose à noter est que ngModel est nécessaire pour que ngOptions fonctionne ... notez le ng-model="blah"qui dit "définissez $ scope.blah sur la valeur sélectionnée".
Essaye ça:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Voici plus de la documentation d'AngularJS (si vous ne l'avez pas vu):
pour les sources de données du tableau:
- étiquette pour la valeur dans le tableau
- sélectionner comme étiquette pour la valeur dans le tableau
- étiquette groupe par groupe pour la valeur dans le tableau = sélectionner comme étiquette groupe par groupe pour la valeur dans le tableau
pour les sources de données d'objets:
- étiquette pour (clé, valeur) dans l'objet
- sélectionner comme étiquette pour (clé, valeur) dans l'objet
- étiqueter groupe par groupe pour (clé, valeur) dans l'objet
- sélectionner comme groupe d'étiquettes par groupe pour (clé, valeur) dans l'objet
Pour des éclaircissements sur les valeurs des balises d'option dans AngularJS:
Lorsque vous utilisez ng-options, les valeurs des balises d'option écrites par ng-options seront toujours l'index de l'élément de tableau auquel la balise d'option se rapporte . En effet, AngularJS vous permet en fait 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 $scope.selectedItemdirectement un objet entier . Le fait est qu'avec AngularJS, vous n'avez pas à vous soucier du contenu de votre balise d'option. Laissez AngularJS gérer cela; vous ne devez vous soucier que de ce qui se trouve dans votre modèle dans votre champ d'application.
Voici un plongeur démontrant le comportement ci-dessus et montrant le code HTML écrit
Gérer l'option par défaut:
Il y a quelques choses que je n'ai pas mentionnées 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-initqui définit le modèle (de ng-model) au premier élément dans les éléments dans lesquels vous répétez ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Remarque: Cela pourrait devenir un peu fou s'il foose trouve qu'il est correctement initialisé à quelque chose de "faux". Dans ce cas, vous voudrez fooprobablement gérer l'initialisation de votre contrôleur.
Personnalisation de 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 en tant qu'enfant de votre sélection, avec un attribut de valeur vide, puis de personnaliser son texte intérieur:
<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 là même après avoir sélectionné une option différente. Ce n'est pas le cas pour le comportement par défaut des sélections sous AngularJS.
Une option par défaut personnalisée qui se cache après une sélection:
Si vous vouliez que votre option par défaut personnalisée disparaisse après avoir sélectionné 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>