Uma coisa a observar é que o ngModel é necessário para o ngOptions funcionar ... observe o ng-model="blah"que está dizendo "defina $ scope.blah com o valor selecionado".
Tente o seguinte:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Aqui está mais da documentação do AngularJS (se você ainda não o viu):
para fontes de dados de matriz:
- rótulo para valor na matriz
- selecione como rótulo para o valor na matriz
- grupo de etiquetas por grupo para o valor na matriz = selecione como grupo de etiquetas por grupo para o valor na matriz
para fontes de dados do objeto:
- rótulo para (chave, valor) no objeto
- selecione como rótulo para (chave, valor) no objeto
- grupo de etiquetas por grupo para (chave, valor) no objeto
- selecione como grupo de etiquetas por grupo para (chave, valor) no objeto
Para algum esclarecimento sobre os valores das tags de opção no AngularJS:
Quando você usa ng-options, os valores das tags de opção gravados por ng-options sempre serão o índice do item da matriz à qual a tag de opção se refere . Isso ocorre porque o AngularJS realmente permite selecionar objetos inteiros com controles selecionados, e não apenas tipos primitivos. Por exemplo:
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>
A descrição acima permitirá que você selecione um objeto inteiro $scope.selectedItemdiretamente. O ponto é que, com o AngularJS, você não precisa se preocupar com o que está em sua tag de opção. Deixe o AngularJS lidar com isso; você só deve se preocupar com o que está no seu modelo no seu escopo.
Aqui está um plunker demonstrando o comportamento acima e mostrando o HTML gravado
Lidando com a opção padrão:
Há algumas coisas que não mencionei acima relacionadas à opção padrão.
Selecionando a primeira opção e removendo a opção vazia:
Você pode fazer isso adicionando um simples ng-initque define o modelo (de ng-model) para o primeiro elemento nos itens em que está repetindo ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Nota: Isso pode ficar um pouco louco, se foofor inicializado corretamente com algo "falso". Nesse caso, você desejará lidar com a inicialização do fooseu controlador, provavelmente.
Customizando a opção padrão:
Isto é um pouco diferente; aqui tudo o que você precisa fazer é adicionar uma tag de opção como filho do seu select, com um atributo de valor vazio, e personalizar seu texto interno:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Nota: Nesse caso, a opção "vazia" permanecerá lá, mesmo depois que você selecionar uma opção diferente. Este não é o caso do comportamento padrão de seleções no AngularJS.
Uma opção padrão personalizada que oculta após a seleção ser feita:
Se você deseja que sua opção padrão personalizada desapareça depois de selecionar um valor, você pode adicionar um atributo ng-hide à sua opção padrão:
<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>