时间戳

首页 > 解决方案 > 使用 Datalist 输入 - AngularJS 的 IE 中不会触发 ng-change

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

问题描述

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

请让我知道如何在 IE 中使用它，以便可以在选择 datalist 值时触发 ng-change。

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

标签： javascriptangularjsangularjs-ng-change

解决方案

要达到预期的结果，请在输入字段中使用以下 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-click 或 ng-change 不起作用的数据列表，不会触发 ng-change

将值分配给范围变量 - selectedVal 后，运行 $scope.$apply() 以查看 UI 上的选定选项

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

推荐阅读