Angular Input percentage and currency mask

Diego Unanue

I'm using angular, I was looking hard, but I can't find a good input mask. I'll have two kind of inputs, what I want is that when I type a number, in currency inputs I need a directive or something that when I type a number the sign '$' appear in the beginning of the input.

And when the input is a percentage the sign '%' a directive or something that appends the '%' at the end of the string.

enter image description here

I have this directive that allow only numbers, and you can say the lenght of the integer part and the decimal part. If it can be reused to add a $ or % will be perfect.

app.directive('isNumber', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attrs, modelCtrl) {
        scope.$watch(attrs.ngModel, function (newValue, oldValue) {
            var decimalLenght = parseInt(attrs.decimalpart) + 1;
            var integerLenght = parseInt(attrs.integerpart) + 1;
            var arr = String(newValue).split("");
            if (arr.length === 0) return;
            if (arr.length === 1 && arr[0] === '.') return;
            if (arr.length === 2 && newValue === '-.') return;
            if (isNaN(newValue) || ((index_dot = String(newValue).indexOf('.')) != -1
                && String(newValue).length - index_dot > decimalLenght
                ) || (index_dot == -1 && arr.length === integerLenght)) {
                var scopeVar = scope;
                var a = attrs.ngModel.split(".");
                for (i = 0; i < a.length - 1; i++) {
                    if (scopeVar === undefined || scopeVar == null || newValue == null) {
                        return;
                    }
                    scopeVar = scopeVar[a[i]];
                }
                scopeVar[a[a.length - 1]] = oldValue;
            }
        });
    }
   };
});

To use it just put is-number, decimalpart and integerpart

<input name="ZCHGSRP" type="text" ng-model="selectedItem.ZCHGSRP" is-number decimalpart="-1" integerpart="3" class="form-control" class="form-control" required />

Devjit

You can use this, must fine tune it. its just a rough approach. check out this fiddle https://jsfiddle.net/devjit/bgr4zvkn/1/.

app.directive('isNumber', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
    debugger;
    scope.$watch(attrs.ngModel, function (newValue, oldValue) {
        var decimalLenght = parseInt(attrs.decimalpart) + 1;
        var integerLenght = parseInt(attrs.integerpart) + 1;
        newValue = newValue.replace('$','');
        var arr = String(newValue).split("");
        if (arr.length === 0) return;
        if (arr.length === 1 && arr[0] === '.') return;
        if (arr.length === 2 && newValue === '-.') return;
        if (isNaN(newValue) || ((index_dot = String(newValue).indexOf('.')) != -1
            && String(newValue).length - index_dot > decimalLenght
            ) || (index_dot == -1 && arr.length === integerLenght)) {
            var scopeVar = scope;
            var a = attrs.ngModel.split(".");
            for (i = 0; i < a.length - 1; i++) {
                if (scopeVar === undefined || scopeVar == null || newValue == null) {
                    return;
                }
                scopeVar = scopeVar[a[i]];
            }
            scopeVar[a[a.length - 1]] = oldValue;
            return;
        }

         var scopeVariable = scope;
        var ngMod = attrs.ngModel.split(".");
           for (i = 0; i < ngMod.length - 1; i++) {
                if (scopeVariable === undefined || scopeVariable == null || newValue == null) {
                    return;
                }
                scopeVariable = scopeVariable[ngMod[i]];
            }
        scopeVariable[ngMod[ngMod.length - 1]]='$'+ newValue;
    });
}
   };
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TOP Ranking

HotTag

Archive