1

What would be the best way to do the following in Javascript / AngularJS?

I have an input box and a soft numeric 10 key (buttons).

Instead of having the user enter "." on the keyboard or press the "." on the soft pad, the input should assume a number 2 places or less is a decimal

User Enters:
1 = 0.01
2 = 0.12
3 = 1.23
.00 = 123.00

It needs to be able to handle mixing keyboard and soft key input. The user can press the "." key on the physical numpad. The soft numpad only has 0 and .00, no "." key.

The backspace key would delete 1 digit from the right. 100.50 then clicking backspace should produce 10.50, not 100.5

The advantage to the "fixed decimal" is not needing to enter a ".", which would be far more common than entering whole numbers outside of the quick cash buttons I have on the right.

Currency formatting the value in the inputbox is a requirement, but outside of the scope of this particular question. (thinking of using ng-currency or numbrojs (since ng-currency stores the model as a float)).

enter image description here

I'm currently working through the problem:

  function concatNumber(num)
  {
        if (vm.transaction.paymentAmount === undefined || vm.transaction.paymentAmount === 0 || vm.transaction.paymentAmount === '')
        {
            vm.transaction.paymentAmount = '0.0' + num;
            return;
        }
}
Robert Baker
  • 25,593
  • 1
  • 20
  • 21
  • 5
    And have you tried anything at all to achieve this ? – adeneo Apr 22 '15 at 22:08
  • Yes, I'm working through it now, I edited my question to include what I have so far. – Robert Baker Apr 22 '15 at 22:12
  • Quick idea: treat the input string as the number of cents then format the number of cents to two decimals places after dividing by 100. – ryanyuyu Apr 22 '15 at 22:17
  • @ryanyuyu thanks, I didn't think of that. I was about to write a bunch of regex. – Robert Baker Apr 22 '15 at 22:20
  • @Robert there was a similar-ish question I saw done in C# (or was it Java?). I'd provide a link but I can't find it. Anyway best of luck. – ryanyuyu Apr 22 '15 at 22:24
  • This sorta works partway: http://jsfiddle.net/m3e7hou8/1 It starts getting complex dealing with backspace and other operations, though. That's probably the more complicated part of the process to handle. – Jared Farrish Apr 22 '15 at 23:00
  • I think what I'll do is store the number as a string. When I display it, then convert the string into a number /2, then run numbro/accountingjs for display formatting. I'll need to find out how I can use ng-model in my input, but then format the input display without changing my ng-model. – Robert Baker Apr 22 '15 at 23:49

2 Answers2

0

Whenever I am doing anything involving currency in JavaScript, I turn to Accounting.js . Among the many other reasons I recommend it, it also helps with automatic digit formatting.

Here's a link to the demo section of the docs.

Community
  • 1
  • 1
cratervale
  • 121
  • 1
  • 4
0

I ended up using a string instead of a number. Then converting the string with parseFloat() and dividing by 100. I did this in a filter where the string value remains '100' // $1.00

Robert Baker
  • 25,593
  • 1
  • 20
  • 21