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

Question

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.

score 3 · Accepted Answer · answered Apr 27 '18 at 18:40

3

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

answered Apr 27 '18 at 18:40

Naga Sai A

10,771
1
21
40

Thank you Naga Sai. This works as expected! Appreciate your help! – Vijay Venugopal Menon Apr 27 '18 at 19:32
1

I do not recommend mixing native JavaScript event handlers such as `oninput` and AngularJS callbacks! – user1438038 Feb 08 '21 at 11:19

score 0 · Answer 2 · answered Feb 08 '21 at 11:18

AngularJS ignores the input event in Internet Explorer 11, because Microsoft's support for input is very buggy. However, you could implement your own directive and assign it to the element, in order to emit a change event yourself, whenever an input event occurs.

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

I do not recommend using the oninput attribute, because you should always stick with the ng-* attributes and not mix up AngularJS callbacks and native JavaScript event handlers. Using oninput, you might end up with other problems concerning the AngularJS data model.

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

2 Answers2

Linked

Related