CODEWITHSUNDEEP
angularjs
texas697
texas697

Reputation: 6387

How to format a input type number field with currency

I have been trying to locate examples of how to add commas to a angular input type="number" field. Everything I have seen uses a type="text". the issue is I need to keep the wheel that the number field has.

Is it possible to work around this? I have seen some css hacks that only work with chrome.

I need all browsers to work.

Upvotes: 2

Views: 7045

Answers (2)

MechanicalCoder
MechanicalCoder

Reputation: 286

I came across a similar examples for how to add commas to a angular input type="number" field.

try the below example, i have not tried it, but it looks promising

you may use this example to create a directive as per you need http://blog.krusen.dk/angularjs-decimals-browsers/

Upvotes: 2

SoluableNonagon
SoluableNonagon

Reputation: 11755

This is not the answer to your original question, as I don't know whether you can insert commas and currency symbols into number fields. Instead of keeping it as number field, but try this, maybe it will help:

Allow text, and limit user input to only digits.

<input type="text" ng-model="value" numbers-only/>

Directive:

.directive('numbersOnly', [
    function(){ // limit the input field to numbers only, but retain value as string. Note do not use on type=number input field
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, modelCtrl) {

                modelCtrl.$parsers.push(function (inputValue) {

                    var transformedInput = inputValue;
                    transformedInput = transformedInput.replace(/\D/g,'');

                    if(transformedInput)
                        transformedInput = parseInt(transformedInput)+"";

                    if (transformedInput!=inputValue) {
                        modelCtrl.$setViewValue(transformedInput);
                        modelCtrl.$render();
                    }

                    return transformedInput;
                });
            }
        };
    }
])

http://plnkr.co/edit/zLj34V7v7xICyfGnlg3k?p=preview

Upvotes: 0

Related Questions