Xun Yang Xun Yang - 1 year ago 147
AngularJS Question

Microsoft Edge and Angularjs: ng-model doesn't work with input number type and arrow keys

I have a input with

, it is associated with a ng-model.I want to be able to press up and down arrows to update its value. However in Microsoft Edge the ng-model is not updated in this case, see my example here:


Is there a way of updating the model, that's not using jquery? We want to avoid using jquery in controllers

Answer Source

So it's a bug from both angularjs and Edge, as seen in the discussion below:


A snippet is proposed to fix the problem by oneself:

.directive('input', () => {
  if(currentBrowser!="edge") return {};

  return {
    link: (scope, elem) => {
      if (elem[0].type === 'number') {
        elem.on('keydown', evt => {
          switch (evt.which) {
            case 38:   // UP_ARROW
            case 40:   // DOWN_ARROW
              scope.$evalAsync(() => elem.triggerHandler('change'));

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download