0

I want to make a field that only takes numbers and has an implied data point two digits in.

For example, to get 3,450.65, the user would type 345065 instead of the 3450.65, and we would insert the decimal automatically.

A perfect example is here: http://jsfiddle.net/n6ggtq7a/

Except this uses extensive code that would not be maintainable and seems overly complicated for this task.

Then again, there is this plunker: http://plnkr.co/edit/iFnjcq?p=preview

Which does this task, but uses jQuery. I would like to stay out of jQuery altogether.

I've looked into ng-currency

<script>
  angular.module('currencyExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.amount = 1234.56;
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="number" ng-model="amount" aria-label="amount"> <br>
  default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
  custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span>
  no fractions (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span>
</div>

but this requires that someone types the decimal point. I feel like this should exist somewhere... am I missing something obvious?

2
  • 1
    The format directive in that Plunker doesn't contain any code that requires jQuery—strip out the jQuery import and the input should still work.
    – miqh
    Mar 17, 2016 at 0:12
  • @miqid you're right! Thanks for pointing that out.
    – jenryb
    Mar 17, 2016 at 14:25

2 Answers 2

1

Here's a filter that turns an integer amount into currency:

myApp.filter('dollars', function($filter) {
  return function(amount) {
    return $filter('currency')(amount / 100.0);
  }
});

You use it like this:

{{ amount | dollars }}

This means that you do all of your accounting in integers.

0

Here's a directive for an input field that enforces 0-9 numbers and inserts a decimal point. The bit that does the formatting is a bit ugly, and could probably be done in like 2 lines, but you get the idea.

var mod = angular.module('app');

mod.directive('decnumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var decnumber = function (inputValue) {

                if (inputValue == undefined) inputValue = "";
                var formattedVal = inputValue.replace(/[^0-9]/g, "").replace(/^0+/, "");

                if (formattedVal.length === 0) {
                    formattedVal = '0.00' + formattedVal;
                } else if (formattedVal.length === 1) {
                    formattedVal = '0.0' + formattedVal;
                } else if (formattedVal.length === 2) {
                    formattedVal = '0.' + formattedVal;
                } else {
                    formattedVal = formattedVal.slice(0, -2) + '.' + formattedVal.slice(-2);
                }

                if (formattedVal !== inputValue) {
                    modelCtrl.$setViewValue(formattedVal);
                    modelCtrl.$render();
                }
                return formattedVal;
            }
            modelCtrl.$parsers.unshift(decnumber);
            decnumber(scope[attrs.ngModel]);
        }
    };
});

The input :

<input decnumber  type="text" name="decNumber" ng-model="decNumber">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.