Selecionar elemento no modelo angular que não atualizaValor na segunda seleção
Eu tenho um elemento de seleção vinculado a um modelo em uma vista angular. Ao preencher o formulário com o teclado, notei que se você seta para baixo para a segunda opção o valor, o modelo ainda representa o primeiro valor. Isso só acontece ao usar o teclado para preencher o formulário.
A configuração é bem simples, usando o angular 1.4.3:
var app = angular.module('app', []);
app.controller('myController', function() {
var vm = this;
vm.options = [{
Id: 1,
Value: 'A'
}, {
Id: 2,
Value: 'B'
}, {
Id: 3,
Value: 'C'
}]
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<body ng-app="app">
<div ng-controller="myController as ctrl">
<p>
Model is not updated on second down button push. Repro:
, <ol>
<li>Tab to select element</li>
<li>Hit down and notice the optionId updated to 1</li>
<li>Hit down again and notice that the displayed value changes to B, but optionId stays as 1</li>
<li>Hit down again and notice that the displayed value changes to C, and optionId changes to 3</li>
<li>Hit up and notice that displayed value changes to B, and optionId changes to 2</li>
</ol>
Why doesn't the optionId = 2 on the initial selection of B
</p>
<select id="mySelect" ng-options="item.Id as item.Value for item in ctrl.options" ng-model="ctrl.optionId" style="width:200px">
</select>
<div><strong>optionId: {{ctrl.optionId}}</strong>
</div>
</div>
</body>
Por que o modelo não é atualizado na segunda seta para baixo?
Atualizar Aqui está um desentupidor que exibe o comportamento,http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info
2ª Atualização Aqui está umplunker modificado que implementa a solução alternativa proposta por Matt. Esta solução alternativa causa o comportamento desejado no Chrome, Firefox e Internet Explorer