Format a number to 2 decimal places in HTML 5, instead of Javascript and AngularJS
Just an interesting piece of information I ran across the other day. Thought I would share.
Using HTML 5 to format a number to 2 decimal places in HTML 5 instead of using Javascript or AngularJS or some other language.
1 2 3 4 5 6 7 8 9 10 11 | //Instead of having to do (decimal): <input type="text" data-ng-model="statusCharges.pricePerLead" /> parseFloat($scope.company.pricePerLead).toFixed(2) : undefined //Do this (decimal): <input type="number" step="0.01" data-ng-model="statusCharges.pricePerLead" /> //If you use type=”number” and leave out the step you will get an int <input type="number" step="0.01" data-ng-model="statusCharges.pricePerLead" /> |
HTML5 continues to amaze me everyday. I discover more and more things about HTML5 each day. This makes it pretty easy and straight forward to format a number to 2 decimal places in HTML 5. I know HTML is a markup language and should probably not be used to format data like this, but I think this is a pretty cool feature, that takes up very little space and saves us as developers time. The alternative would be to use some Javascript to format when the page loads. This can be a little bit of a nightmare, in that you need to maintain this code and it is more code to download when the page is called. Others might argue that the maintenance is minimal and so is the bandwidth cost. I would argue that anything we as developers can do to minimize code and take advantage of things built into the language is a benefit.
I feel like this is one of those “hidden” features of the language, that not everyone may know about. Hope this helps someone else as it has helped me.