Thousand separator in input - on Key Up

[Michiel Kikkert]

Hi,

Just starting to learn AngularJS and so far I love it!

I ran into my first real challenge whereby I have a requirement to allows users to input values into an input field - and while they type, the input value should be modified with thousand separators (in my case a dot for european currency format).

So basically, the input should have the separator, but the corresponding model should NOT have the dot (but only the clean value).

I have been thinking about multiple approaches but I keep running into scoping issues and the fact that the view representation is different from the model. So far, I came up with a directive that kind of does what I need, but still has some issues.


So this kinda works - check the Plunker here: http://plnkr.co/edit/jY3itHHtHWTJmbDsoInp?p=preview
It shows the dotted value in the input (while you type) and the testvalue model updates (slightly delayed).

I have my doubts of this is the correct way of doing it. It seems slightly hacky to me so I'm looking for some feedback or different approaches on how to do this.

Also, I have problem if I put this directive in an NgRepeat loop - the model no longer updates then?

See plunker for that issue here: http://plnkr.co/edit/0berlPHhnFymCdsAGrz7?p=preview

Any input appreciated!

[Ryan Randall]

You can use a combination of $parsers and $formatters. Here's an example: http://plnkr.co/edit/0Ger5fFzwPJQbJzwoflV?p=preview

See also: http://docs.angularjs.org/guide/forms

Take a look at http://docs.angularjs.org/guide/i18n for international currency formats.

[Michiel Kikkert]

Yes, that looks like a MUCH better solution. Not sure how it all works so I will spend some time reverse engineering it.

Thanks!

[Gaurav Saini]

Hello Ryan,

Great solution. Just one thing is that the decimal part is not working correctly.
Also, if after adding decimal place, I tried to edit the part before decimal (10000.6789 in this case 10000)  it moves the cursor to the end.

I have made a plnkr over yours can you look into it http://plnkr.co/edit/HfkwLd7DXnQdwa3NrcMN?p=preview

Thanks
Gaurav

[Ryan Randall]

You seem to imply that there was a requirement for a decimal part.

You can preserve the cursor position using one of these ideas...

http://stackoverflow.com/questions/22940346/preserving-cursor-position-with-angularjs

http://stackoverflow.com/questions/22574295/set-caret-position-in-input-with-angularjs

Note that the plunker I linked to above is not mine - I just provided the link to help point Michiel in the right direction.