angular 中的 Select 元素未在第二次选择时更新 modelValue

Question

我有一个 select 元素绑定到 angular 视图中的模型。当用键盘填写表格时，我注意到如果你向下箭头到第二个选项的值，模型仍然代表第一个值。只有在使用键盘填写表格时才会发生这种情况。

设置非常简单，使用 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>

为什么在第二次按下向下箭头时模型没有更新？

更新这是一个展示行为的 plunker，http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

第二次更新 这是实现 Matt 提议的解决方法的 modified plunker。此解决方法会在 Chrome、Firefox 和 Internet Explorer

中导致预期的行为

Answer 1

我认为您的问题复制了一个已有的 angular 问题，该问题有解决方法。

随意浏览 the issue 并追踪对话和一些重复内容。

为 Chrome/Safari/Firefox 建议的解决方法如下所示：

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

编辑：

上述评论中的 OP issue 由于这个原因作为重复项被关闭。

angular 中的 Select 元素未在第二次选择时更新 modelValue

Select element in angular not updating modelValue on second selection

javascript

angularjs

html-select