在角选择元素上第二个选择不更新modelValue [英] Select element in angular not updating modelValue on second selection
问题描述
我有在角视图绑定到模型中的select元素。在填写与键盘的形式，我注意到，如果你向下箭头，第二个选项的值，该车型还重新presents的第一个值。这仅使用键盘填写表单时发生。
设置为pretty简洁，采用了棱角分明1.4.3：
VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'myController的'，函数（）{\r
VAR VM =这一点;\r
\r
vm.options = [{\r
ID：1，\r
值：'A'\r
}，{\r
编号：2，\r
价值：'B'\r
}，{\r
ID：3，\r
价值：'C'\r
}]\r
}）; \r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs。组织/ 1.4.3 / angular.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT;机身NG-应用=应用程序＆GT;\r
＆LT; DIV NG控制器=作为myController的CTRL＆GT;\r
＆所述p为H.;\r
没有更新的第二个向下按钮推送模型。摄制：\r
＆LT;＆OL GT;\r
＆LT;立GT; Tab键选择的元素＆lt; /李＆GT;\r
＆LT;立GT;打不下来，注意更新为1＆LT的optionId; /李＆GT;\r
＆LT;立GT;再次打下来，发现所显示的值更改为B，但optionId保持为1 LT; /李＆GT;\r
＆LT;立GT;再次打下来，发现显示的数值更改为C，并optionId改变3'; /李＆GT;\r
＆LT;立GT;撞了上去，并且显示的值更改为B和optionId修改2'通知; /李＆GT;\r
＆LT; / OL＆GT;\r
为什么没有optionId = 2 B的初始选择\r
＆所述; / P＆GT;\r
＆LT;选择一个id =mySelectNG选项=item.Id作为item.Value在ctrl.options项目NG模型=ctrl.optionId的风格=宽度：200像素＆GT;\r
＆LT; /选择＆GT;\r
＆LT; DIV＆GT;＆LT;强＆GT; optionId：{{ctrl.optionId}}＆LT; / STRONG＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT; \r
为什么不上第二个向下箭头preSS模型更新？
更新
下面是表现出行为plunker， http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info
2日更新
下面是实现马特提出解决办法一个修改plunker 。这种变通办法导致在Chrome，Firefox和期望的行为的Internet Explorer
我相信你的问题克隆有大约可用。一个工作pre-现有的角度问题。
随意浏览问题并跟踪谈话和一些重复。
周围的工作建议为Chrome / Safari / Firefox中看起来是这样的：
指令（'changeOnKeyup'，功能changeOnKeyupDirective（）{
返回功能changeOnKeyupPostLink（范围，ELEM）{
elem.on（'KEYUP'，elem.triggerHandler.bind（ELEM，'变'））;
};
}）;
编辑：
该OP的问题在评论上述被关闭作为该重复原因。
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
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.
这篇关于在角选择元素上第二个选择不更新modelValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
