Select element in angular not updating modelValue

I've got a select element bound to a model in an angular view. When filling out the form with the keyboard, I noticed that if you down arrow to the second option the value, the model still represents the first value. This only happens when using the keyboard to fill out the form.

Set up is pretty simple, using 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>

Why doesn't the model update on the second down arrow press?

Update Here's a plunker that exhibits the behavior, http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2nd Update Here's a modified plunker that implements the workaround Matt proposed. This workaround causes the desired behavior in Chrome, Firefox, and Internet Explorer

标签： javascript angularjs html-select

1条回答

爷的心禁止访问

2楼-- · 2019-03-27 19:28

I believe your problem clones a pre-existing angular issue which has a work around available.

Feel free to browse the issue and trace the conversation and some of the duplicates.

The work around suggested for Chrome/Safari/Firefox looks like this:

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

Edit:

The OP's issue in the comments above was closed as a duplicate for this reason.

0人赞添加讨论(0) 举报

Select element in angular not updating modelValue

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间