使用 Datalist 输入 - AngularJS 的 IE 中不会触发 ng-change

问题描述

我有一个带有 datalist 的输入标签，它的 ng-change 不会在 Internet Explorer 11 中的选择时被触发.它只会在输入模糊时被触发.它在 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.

代码笔如下: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-change 没有被触发，因为 ng-click 或 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

这篇关于使用 Datalist 输入 - AngularJS 的 IE 中不会触发 ng-change的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！