Brainleak

Blog as external memory

Creating a Currency Textfield in AngularJS

When working with currencies I have the tendency to store the value in the database as an INT value, to encounter less rounding errors. The value shown is 99.99 while the persisted value is 9999.

AngularJS Directive seems to be a great way to make a custom textfield.

app.directive("currencyField",['$sce',function($sce) {
      return {
        restrict: 'AE',
        require: 'ngModel',
        template: '<input type="text" min="0.0" step="0.01" size="4" />',
        replace: true,
        link: function(scope,elem,attrs,ngModel) {
          if (!ngModel) return;

          function centsToEuro(value) {
            return value / 100.0;
          }

          function euroToCents(value) {
            return parseInt(value * 100);
          }

          ngModel.$parsers.push(euroToCents);
          ngModel.$formatters.push(centsToEuro);
        }
      }
    }]);

To use it, just add currency-field to input field

<input currency-field ng-model="saleitem.price" ng-blur="update(saleitem)" placeholder="price" />