Sélectionnez l'élément dans le modélisme angulaire non-mise à jour en deuxième sélection

J'ai un élément choisi lié à un modèle dans une vue angulaire. Lorsque vous remplissez le formulaire avec le clavier, j'ai remarqué que si vous basculez vers la seconde option, la valeur, le modèle représente toujours la première valeur. Cela ne se produit que lorsque vous utilisez le clavier pour remplir le formulaire.

Configurer est assez simple, en utilisant angulaire 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>

Pourquoi la mise à jour du modèle sur la deuxième flèche vers le bas ne presse-t-elle pas?

Mise à jour Voici un plongeur qui présente le comportement, http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2ème mise à jour Voici un plongeur modifié qui implémente la solution proposée proposée par Matt. Cette solution de contournement provoque le comportement souhaité dans Chrome, Firefox et Internet Explorer

Je crois que votre problème clone une question angulaire préexistante qui a un travail disponible.

N'hésitez pas à parcourir le problème et à tracer la conversation et certains des doublons.

Le travail suggéré pour Chrome / Safari / Firefox ressemble à ceci:

 directive('changeOnKeyup', function changeOnKeyupDirective() { return function changeOnKeyupPostLink(scope, elem) { elem.on('keyup', elem.triggerHandler.bind(elem, 'change')); }; });

Modifier:

Le problème de l'OP dans les commentaires ci-dessus a été fermé comme un double pour cette raison.