使用Datalist进行输入

使用Datalist进行输入 - 在AngularJS的IE中不会触发ng-change(Input with Datalist - ng-change is not fired in IE for AngularJS)

我有一个datalist输入标签，在Internet Explorer 11中，ng-change没有在选择时被触发。它只在输入模糊时被触发。 它正在使用Chrome。

Codepen下面： 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中，该值仅在标签键按下时显示，或者当我们点击标签外时显示。

请让我知道如何在IE中实现这一功能，以便在选择datalist值时触发ng-change。

注意：如果您将AngularJS版本更改为1.2.x，则它工作正常。 上面的任何东西，它不工作。 这是一个更大的应用程序的简化版本，我从数据专家的选择中触发后端服务。

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 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>

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.

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.

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.

最满意答案

要达到预期结果，请在输入字段的以下选项中使用输入事件

<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不会被解雇

在将值赋给作用域变量 - selectedVal后，运行$ scope。$ apply（）以查看UI上的选定选项

代码示例 - https://codepen.io/nagasai/pen/jxVOrp

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 is not fired because of the datalist on which ng-click or ng-change doesn't work

After assigning value to scope variable - selectedVal , run $scope.$apply() to see the selected option on the UI

code sample - https://codepen.io/nagasai/pen/jxVOrp