{"id":223,"date":"2017-08-20T15:07:06","date_gmt":"2017-08-20T19:07:06","guid":{"rendered":"http:\/\/langstonsoftware.com\/?p=223"},"modified":"2024-01-30T19:09:16","modified_gmt":"2024-01-31T00:09:16","slug":"currency-inputs-in-angularjs-1-x","status":"publish","type":"post","link":"https:\/\/langstonsoftware.com\/2017\/08\/20\/currency-inputs-in-angularjs-1-x\/","title":{"rendered":"Currency Inputs in AngularJS (1.x)"},"content":{"rendered":"<p>Currency inputs seem to be a forgotten area of standard libraries. <a href=\"https:\/\/stackoverflow.com\/questions\/5080451\/how-should-i-use-editorfor-in-mvc-for-a-currency-money-type\" target=\"_blank\" rel=\"noopener\">Even the batteries included .NET MVC framework doesn&#8217;t really answer the question for you.<\/a> They often are omitted completely, and the community variants are many and buggy. This soup of conflicting standards over a very basic problem brings us to the canonical problem: when is it time to write your own solution?<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/xkcd.com\/927\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/imgs.xkcd.com\/comics\/standards.png?w=640&#038;ssl=1\" alt=\"xkcd standards\" data-recalc-dims=\"1\" \/><\/a><\/p>\n<p>AngularJS (1.x) has at least five different easy to find options (<a href=\"https:\/\/stackoverflow.com\/questions\/19890364\/format-input-value-in-angularjs?noredirect=1&amp;lq=1\" target=\"_blank\" rel=\"noopener\">links<\/a>. <a href=\"https:\/\/stackoverflow.com\/questions\/19094150\/using-angularjs-directive-to-format-input-field-while-leaving-scope-variable-unc\" target=\"_blank\" rel=\"noopener\">to<\/a>. <a href=\"https:\/\/github.com\/jstroem\/ng-input-currency\" target=\"_blank\" rel=\"noopener\">many<\/a>. <a href=\"https:\/\/github.com\/greengerong\/ngmodel-format\" target=\"_blank\" rel=\"noopener\">options<\/a>. <a href=\"https:\/\/github.com\/aguirrel\/ng-currency\" target=\"_blank\" rel=\"noopener\">here<\/a>.). Most of them are built off the built in formatters for <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/filter\/currency\" target=\"_blank\" rel=\"noopener\">currency<\/a> or <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/filter\/number\" target=\"_blank\" rel=\"noopener\">numbers<\/a>. But in my last work project I found most of them unacceptable, at least to the product manager testing the solutions. So I created my own n+1 answer.<\/p>\n<p><a href=\"https:\/\/jsfiddle.net\/thomaslangston\/5h17fosc\/12\/\" target=\"_blank\" rel=\"noopener\">My solution based on what was already available can be found on jsFiddle.net.<\/a><\/p>\n<p>Other solutions had either an inability to include decimals, or odd behavior when you used the backspace key, or wigged out when you deleted a decimal. They also often used client locale information to decide the formatting rules, which was unnecessary and potentially wrong for my solution. My answer still has an issue when deleting from the middle of the input, the cursor will jump back to the far right end after. But I considered that still a solid win considering the offerings available before.<\/p>\n<p>In the end my PM was happy, our customer was happy, and I think our code was happy. Even if I had to reinvent the wheel one more time.<\/p>\n<h3>Before You Go<\/h3>\r\n&nbsp;<p>\r\nWas this post was incorrect or incomplete?  Leave a comment.\r\n<\/p>\r\n<style>\r\n#callToAction {color:red}\r\n<\/style>\r\n<p>\r\nWas this post helpful to you? <a id=\"callToAction\" class=\"button\" href=\"http:\/\/eepurl.com\/bYVEJj\"><em>Subscribe for emails on full stack web development.<\/em><\/a>\r\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Currency inputs seem to be a forgotten area of standard libraries. Even the batteries included .NET MVC framework doesn&#8217;t really answer the question for you. They often are omitted completely, and the community variants are many and buggy. This soup of conflicting standards over a very basic problem brings us to the canonical problem: when &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Currency Inputs Are Part of the Land That Standards Forgot: AngularJS (1.x)","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[6,7],"tags":[],"class_list":["post-223","post","type-post","status-publish","format-standard","hentry","category-angularjs","category-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6Os38-3B","_links":{"self":[{"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/posts\/223"}],"collection":[{"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":11,"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/posts\/223\/revisions\/273"}],"wp:attachment":[{"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/langstonsoftware.com\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}