我有一个选择元素绑定到角度视图中的模型。当使用键盘填写表单时,我注意到,如果您将向下箭头指向第二个选项值,则模型仍然代表第一个值。仅当使用键盘填写表单时才会发生这种情况。
设置非常简单,使用 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>
为什么按第二个向下箭头时模型不更新?
Update这是一个表现出这种行为的笨蛋,http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info
第二次更新这是一个修改后的笨蛋 http://plnkr.co/edit/GTqM1K4efjmWdOQGMGAH?p=preview实施马特提出的解决方法。此解决方法会导致 Chrome、Firefox 和 Internet Explorer 中出现所需的行为
我相信您的问题克隆了一个预先存在的角度问题,该问题有可用的解决方法。
随意浏览问题 https://github.com/angular/angular.js/issues/9134并追踪对话和一些重复内容。
针对 Chrome/Safari/Firefox 建议的解决方法如下所示:
directive('changeOnKeyup', function changeOnKeyupDirective() {
return function changeOnKeyupPostLink(scope, elem) {
elem.on('keyup', elem.triggerHandler.bind(elem, 'change'));
};
});
Edit:
OP的issue http://github.com/angular/angular.js/issues/12562由于这个原因,上面的评论被作为重复项关闭。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)