I have a input with type="number", 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:
https://plnkr.co/edit/yZaGxkYG87C1YCNSKnf0?p=preview
Is there a way of updating the model, that's not using jquery? We want to avoid using jquery in controllers
So it's a bug from both angularjs and Edge, as seen in the discussion below:
https://github.com/angular/angular.js/issues/15366
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'));
break;
}
});
}
}
};
});
It should work with this. The problem is since you have not initialized in the controller there is an issue with display. It should work, but seemingly doesnt work in Edge. Everything else remains the same.
<body ng-controller="myCtrl">
<h1>{{helloworld}}</h1>
<input type="number" ng-model="md"/>
<div ng-if="md">{{md}}</div>
</body>
Check the code here:
https://plnkr.co/edit/9Evcuj6AMP5DXqKZejg7
