使用数据列表输入 - AngularJS 在 IE 中不会触发 ng-change

Question

我有一个带有数据列表的输入标签，在 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 中，该值仅在按下 Tab 键或在标签外部单击时显示。

请告诉我如何在 IE 中使用它，以便在选择数据列表值时触发 ng-change。

注意：如果将 AngularJS 版本更改为 1.2.x，它工作正常。以上任何内容，它都不起作用。这是一个更大应用程序的简化版本，我在从数据列表中选择时触发后端服务。

Answer 1

为了达到预期的结果，请为输入字段使用以下 oninput 事件选项

<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 对其不起作用的数据列表

为范围变量赋值后 - selectedVal ，运行 $scope.$apply() 在 UI

上查看选定的选项

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

Answer 2

AngularJS 忽略 Internet Explorer 11 中的 input 事件，因为微软对 input 的支持非常有问题。但是，您可以实现自己的指令并将其分配给元素，以便在 input 事件发生时自己发出 change 事件。

.directive('input', function() {
  return {
    link: function(scope, element, attrs) {
      element.on('input', function() { element.triggerHandler('change'); });
    }
  };
});

我不建议使用 oninput 属性，因为您应该始终坚持使用 ng-* 属性，不要混淆 AngularJS 回调和本机 JavaScript 事件处理程序.使用 oninput，您可能会遇到有关 AngularJS 数据模型的其他问题。

使用数据列表输入 - AngularJS 在 IE 中不会触发 ng-change

Input with Datalist - ng-change is not fired in IE for AngularJS

javascript

angularjs

angularjs-ng-change