角度输入百分比和货币掩码

时间:2015-06-05 14:52:16

标签: javascript jquery angularjs angularjs-directive

我使用棱角分明,我看起来很努力,但我找不到好的输入掩码。我有两种输入,我想要的是当我输入一个数字时,在货币输入中我需要一个指令或者当我输入一个数字时,我需要一个符号' $'出现在输入的开头。

当输入为百分比符号时,'%'指令或附加“'%'在字符串的末尾。

enter image description here

我有这个指令只允许数字,你可以说整数部分和小数部分的长度。如果它可以重复使用来添加$或%将是完美的。

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;
            }
        });
    }
   };
});

要使用它,只需输入is-number,decimalpart和integerpart

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

1 个答案:

答案 0 :(得分:2)

你可以使用它,必须微调它。这只是一个粗略的方法。 看看这个小提琴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;
    });
}
   };
});