Question

我正在使用angularjs构建一个表单，并且我有一个数量字段。

我想验证并格式化金额，因此，无效金额受到限制，只能输入有效金额，应该放弃所有金额。有效金额为：

1.23 0.99

所以，基本上是1位数后跟2位小数点。

我很困惑在过滤器或指令之间使用，因为我从未使用它们中的任何一个。我很感激，如果有人在过去做过类似的事情，如果你能和我分享，或者你可以给我解决方案。

我使用过类似ng-pattern="/^[0-9]*\.[0-9][0-9]$/的ng-pattern，但对我不起作用。

我使用的是AngularJS 1.4最新版本。

编辑 - 我的DODE

    <input type="number"
  name="globalNetPrice"
  value="{{netprice.globalNetPrice}}"
  ng-model="netprice.globalNetPrice"
  class="form-control"
  required
  ng-minlength="0.01"
  ng-maxlength="999"
  ng-pattern="/^[0-9]+.[0-9][0-9]$/"
  >

<p ng-show="netpriceForm.globalNetPrice.$invalid && !netpriceForm.globalNetPrice.$pristine">

<small class="error" ng-show="netpriceForm.globalNetPrice.$error.required">Net Price is required.</small>

<small class="error" ng-show="netpriceForm.globalNetPrice.$error.number">That is not a Net Price. Please input a valid Net Price.</small>

<small class="error" ng-show="netpriceForm.globalNetPrice.$error.pattern">That is not a valid Net Price. Pattern not valid.</small>

</p>

Answer 1

您还可以使用指令： -

     app.directive('numberOnly', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        link: function (scope) {
            scope.$watch('ngModel', function (newValue, oldValue) {
                if (oldValue != undefined && oldValue.length > 0) {
                    if (newValue != undefined) {
                        if (typeof newValue == 'string') {
                            var notNumberCheck = newValue.replace(oldValue, '');
                            if (isNaN(newValue)) {
                                if (notNumberCheck != '.') {
                                    scope.ngModel = oldValue;
                                    return;
                                }
                            }
                        }
                    } else {
                        scope.ngModel = "";
                        return;
                    }
                } else {
                    if (isNaN(newValue) && newValue != '.') {
                        scope.ngModel = "";
                        return;
                    }
                }
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.ngModel = oldValue;
                }
            });
        }
    };
})

Answer 2

Angularjs有currency过滤器，您可以轻松使用。

同时检查此stackoverflow question 这是工作fiddle

app.directive('currencyInput', function() {
return {
    restrict: 'A',
    scope: {
        field: '='
    },
    replace: true,
    template: '<span><input type="text" ng-model="field"></input>{{field}}</span>',
    link: function(scope, element, attrs) {

        $(element).bind('keyup', function(e) {
            var input = element.find('input');
            var inputVal = input.val();

            //clearing left side zeros
            while (scope.field.charAt(0) == '0') {
                scope.field = scope.field.substr(1);
            }

            scope.field = scope.field.replace(/[^\d.\',']/g, '');

            var point = scope.field.indexOf(".");
            if (point >= 0) {
                scope.field = scope.field.slice(0, point + 3);
            }

            var decimalSplit = scope.field.split(".");
            var intPart = decimalSplit[0];
            var decPart = decimalSplit[1];

            intPart = intPart.replace(/[^\d]/g, '');
            if (intPart.length > 3) {
                var intDiv = Math.floor(intPart.length / 3);
                while (intDiv > 0) {
                    var lastComma = intPart.indexOf(",");
                    if (lastComma < 0) {
                        lastComma = intPart.length;
                    }

                    if (lastComma - 3 > 0) {
                        intPart = intPart.splice(lastComma - 3, 0, ",");
                    }
                    intDiv--;
                }
            }

            if (decPart === undefined) {
                decPart = "";
            }
            else {
                decPart = "." + decPart;
            }
            var res = intPart + decPart;

            scope.$apply(function() {scope.field = res});

        });

    }
};

}）;

格式化和验证表格AngularJS 1.4

2 个答案: