Una cosa a tener en cuenta es que ngModel es necesario para que ngOptions funcione ... tenga en cuenta lo ng-model="blah"que dice "establecer $ scope.blah en el valor seleccionado".
Prueba esto:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Aquí hay más de la documentación de AngularJS (si no la ha visto):
para fuentes de datos de matriz:
- etiqueta de valor en la matriz
- seleccione como etiqueta para el valor en la matriz
- etiqueta grupo por grupo para el valor en la matriz = seleccionar como etiqueta grupo por grupo para el valor en la matriz
para fuentes de datos de objeto:
- etiqueta para (clave, valor) en el objeto
- seleccionar como etiqueta para (clave, valor) en el objeto
- etiqueta grupo por grupo para (clave, valor) en el objeto
- seleccione como etiqueta grupo por grupo para (clave, valor) en el objeto
Para algunas aclaraciones sobre los valores de etiqueta de opción en AngularJS:
Cuando lo use ng-options, los valores de las etiquetas de opción escritas por ng-options siempre serán el índice del elemento de matriz con el que se relaciona la etiqueta de opción . Esto se debe a que AngularJS realmente le permite seleccionar objetos completos con controles de selección, y no solo tipos primitivos. Por ejemplo:
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>
Lo anterior le permitirá seleccionar un objeto completo $scope.selectedItemdirectamente. El punto es que, con AngularJS, no necesita preocuparse por lo que hay en su etiqueta de opción. Deje que AngularJS se encargue de eso; solo debe preocuparse por lo que hay en su modelo en su alcance.
Aquí hay un plunker que demuestra el comportamiento anterior y muestra el HTML escrito
Tratar con la opción predeterminada:
Hay algunas cosas que no he mencionado anteriormente en relación con la opción predeterminada.
Seleccionando la primera opción y eliminando la opción vacía:
Puede hacer esto agregando un simple ng-initque establece el modelo (desde ng-model) al primer elemento en los elementos en los que repite ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Nota: Esto podría volverse un poco loco si foose inicializa correctamente a algo "falso". En ese caso, lo más probable es que desee manejar la inicialización de foosu controlador.
Personalizar la opción predeterminada:
Esto es un poco diferente; aquí todo lo que necesita hacer es agregar una etiqueta de opción como elemento secundario de su selección, con un atributo de valor vacío, luego personalizar su texto interno:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Nota: En este caso, la opción "vacía" permanecerá allí incluso después de seleccionar una opción diferente. Este no es el caso del comportamiento predeterminado de las selecciones en AngularJS.
Una opción predeterminada personalizada que se oculta después de realizar una selección:
Si desea que su opción predeterminada personalizada desaparezca después de seleccionar un valor, puede agregar un atributo ng-hide a su opción predeterminada:
<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>