使用数据列表输入-在AngularJS的IE中不会触发ng-change [英] Input with Datalist - ng-change is not fired in IE for AngularJS
问题描述
我有一个带有数据列表的输入标签,在Internet Explorer 11中选择时不会触发ng-change,仅在输入模糊时才触发.它可以在Chrome浏览器中运行.
I have an input tag with datalist for which the ng-change is not getting fired on selection in Internet Explorer 11. It only gets fired on blur of the input. It is working in Chrome.
下方的Codepen: https://codepen.io/vijayvmenon/pen/gzLYgp
Codepen Below: https://codepen.io/vijayvmenon/pen/gzLYgp
<input list="testList" name="origin node" ng-model="SelectedDoctor"
ng-change="LoadSessionData(SelectedDoctor)"
autocomplete="off" required />
<datalist id="testList" >
<option value={{value.id}} ng-repeat="value in data">
</datalist>
<p>{{selectedVal}}</p>
如果您检查代码,则可以看到chrome中的数据列表值如下所示.在IE中,该值仅在按Tab键或在标记外部单击时显示.
If you check the code, you can see that in chrome the data list value is shown below on selection. In IE , the value is shown only on tab key press or when we click outside the tag.
请让我知道如何在IE中运行此功能,以便可以在选择数据列表值时触发ng-change.
Please let me know how I can get this working in IE, so that the ng-change can be fired on selection of datalist value.
注意:如果将AngularJS版本更改为1.2.x,则可以正常工作.以上任何内容,均无效.这是适用于更大应用程序的简化版本,我在从数据列表中进行选择时触发了后端服务.
Note: If you change AngularJS version to 1.2.x, it is working fine. Anything above, its not working. This is a simplified version for a bigger application and I am triggering a backend service on selection from the datalist.
推荐答案
要获得预期结果,请在输入字段中使用oninput事件的以下选项
To achieve expected result, use below option of oninput event for input field
<input list="testList" name="origin node" ng-model="SelectedDoctor" oninput = "angular.element(document.getElementById('check')).scope().LoadSessionData(this)" autocompletestListte="off" required />
<datalist id="testList" >
由于数据列表中的ng-click或ng-change无效,因此未触发ng-change
ng-change is not fired because of the datalist on which ng-click or ng-change doesn't work
为范围变量-selectedVal分配值后,运行$ scope.$ apply()以在UI上查看选定的选项
After assigning value to scope variable - selectedVal , run $scope.$apply() to see the selected option on the UI
代码示例- https://codepen.io/nagasai/pen/jxVOrp
这篇关于使用数据列表输入-在AngularJS的IE中不会触发ng-change的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!