Element im Winkel auswählen, Modellwert bei zweiter Auswahl wird nicht aktualisiert

Question

Aug 12, 2015, 12:22 AM

Element im Winkel auswählen, Modellwert bei zweiter Auswahl wird nicht aktualisiert

Ich habe ein ausgewähltes Element, das in einer Winkelansicht an ein Modell gebunden ist. Beim Ausfüllen des Formulars mit der Tastatur ist mir aufgefallen, dass wenn Sie mit dem Abwärtspfeil zur zweiten Option den Wert eingeben, das Modell weiterhin den ersten Wert darstellt. Dies geschieht nur, wenn Sie die Tastatur zum Ausfüllen des Formulars verwenden.

Einrichten ist mit Angular 1.4.3 ziemlich einfach:

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>

Warum wird das Modell nicht beim zweiten Drücken des Abwärtspfeils aktualisiert?

Aktualisiere Hier ist ein Plunker, der das Verhalten zeigt,http: //plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD? p = info

2nd Update Hier ist ein Modifizierter Plunker implementiert die von Matt vorgeschlagene Problemumgehung. Diese Problemumgehung verursacht das gewünschte Verhalten in Chrome, Firefox und Internet Explorer