Ionic input format

Question

I am developing an application in Ionic and use an input form field for my calculations.

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

However if I update the data with the value 100.10 the input box shows 100.1

I want to format the value in the input field so it always shows 2 decimals (100.10).

I have tried using filters, but they only work when I change the input to type "text". I want to use a type="number" because this only shows the numeric keyboard.

I have also tried:

parseFloat(""+data.toFixed(2))

but this also shows 100.1

Nikola · Accepted Answer · 2015-07-31 12:22:26Z

0

Since you're using Ionic, you get to use Angular. And in Angular you can do this simply like this:

{{ number_expression | number : fractionSize}}

So, if in your case you have a variable dataand you would do it like this:

{{data | number : 2}}

More information in the official docs.

answered Jul 31, 2015 at 12:22

Nikola

15.1k21 gold badges107 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arno van Lieshout Over a year ago

This does not work. This is for labels and normal text. I want the text in the actual input field to show 100.10

Nikola Over a year ago

What browser are you using?

Nikola Over a year ago

And also - a plunker or CodePen with the exact example would help us help you.

Vinicius Dias · Accepted Answer · 2016-10-22 16:36:05Z

0

This is because the type of the input, which is number. If you change it to text will solve the problem.

Or just remove the parseFloat from data.toFixed(2). This way it will go as text to the form, with the trailing 0.

edited Oct 22, 2016 at 16:36

answered Oct 18, 2016 at 14:06

Vinicius Dias

6894 silver badges16 bronze badges

1 Comment

Arno van Lieshout Over a year ago

'I have tried using filters, but they only work when I change the input to type "text". I want to use a type="number" because this only shows the numeric keyboard.'

Collectives™ on Stack Overflow

Ionic input format

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related