Search code examples
javascriptangularjsangularjs-ng-change

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

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.

Solution

  • 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