Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 1.4.x numeric field with gettersetter not working for decimal numbers

I have a problem in chrome(47) where when using an input of type number in combination with ng-model-options="{ getterSetter: true }" does not allow you to enter decimal numbers in the field.

With getterSetter: (not working)

<input ng-model="amount" ng-model-options="{ getterSetter: true }" step="0.01" type="number" >

Without getterSetter: (works)

<input ng-model="_amount" step="0.01" type="number">

see plunker for a demo http://plnkr.co/edit/qu8UXCUtkJaFwjgGE1NX?p=preview

like image 719
user3589296 Avatar asked Nov 09 '22 23:11

user3589296


1 Answers

What is happening there is that when you declare a getterSetter function, this function is being called everytime you modify the input's value.

So when you write "12." the function is being called, but that is not a valid number, so it takes out the "." for providing a valid value.

Try typing "123" and then adding a "." between numbers such as "12.3" that works!

Edit

I have fixed your code, now it works.

Try this:

 $scope.amount = function(newValue) {
  return arguments.length ? ($scope._amount = newValue) : $scope._amount;
};

Here is a forked plunkr: http://plnkr.co/edit/xZtZLH5He4ZnjkqhFApY?p=preview

like image 78
Ignacio Villaverde Avatar answered Nov 14 '22 21:11

Ignacio Villaverde