选择角度中的元素而不是在第二次选择时更新modelValue

Question

选择角度中的元素而不是在第二次选择时更新modelValue

Dus*_*ges 7 javascript html-select angularjs

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

设置非常简单,使用角度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'
  }]
});

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

Answer 1

Mat*_*att 5

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

编辑:

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

归档时间：	10 年，4 月前
查看次数：	360 次
最近记录：	10 年，4 月前