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

发布时间:2019-12-03 整理:脚本之家
脚本之家收集整理的这篇文章主要介绍了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的元素全部内容,希望文章能够帮你解决javascript – 在第二个选择中选择角度而不更新modelValue的元素所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!