javascript – 在第二个选择中选择角度而不更新modelValue的元素

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

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

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

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

第二次更新
这是一个实现Matt提议的解决方案的modified plunker.此解决方法会在Chrome,Firefox和Internet Explorer中产生所需的行为

解决方法

我相信你的问题克隆了一个预先存在的角度问题,它有一个可用的解决方案.

随意浏览the issue并跟踪对话和一些重复项.

针对Chrome / Safari / Firefox建议的解决方案如下所示：

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

编辑：

由于这个原因,上述评论中的OP的issue因副本而被关闭.

javascript – 在第二个选择中选择角度而不更新modelValue的元素

解决方法

相关文章