Question

我目前有一个angularJS指令来验证一个数字。它现在所做的是将输入限制为只有2位小数的数字。我现在有一个新的要求，价值不能超过50,000。我如何将其添加到现有代码中？我尝试了几种解决方案但没有成功。

(function () {
"use strict";
configAppDirective.directive('validNumber', function () {
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }

            ngModelCtrl.$parsers.push(function (val) {
                if (angular.isUndefined(val)) {
                    var val = '';
                }
                var clean = val.replace(/[^0-9\.]/g, '');
                var decimalCheck = clean.split('.');

                if (!angular.isUndefined(decimalCheck[1])) {
                    decimalCheck[1] = decimalCheck[1].slice(0, 2);
                    clean = decimalCheck[0] + '.' + decimalCheck[1];
                }

                if (val !== clean) {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }

               // this doesnt work, only gives an alert
                if (val > 50000) {
                    alert('Fee amount cannot be greater than $50,000');
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }

                return clean;
            });

            element.bind('keypress', function (event) {
                if (event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
});
  }());

Answer 1

找到解决方案，请参阅此处的代码：

configAppDirective.directive('validNumber', ['toastr', function (toastr) {
    return {
        restrict: 'E',
        require: '?ngModel',
        scope: {
            "id": "@id",
            "placeholder": "@placeholder",
            "class": "@cssclass",
            ngModel: '='
        },
        template: '<input required="required" type="text" class="{{class}}" id="{{id}}" ng-model="ngModel" placeholder="{{placeholder}}">',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }
            scope.$watch('ngModel', function (newValue, oldValue) {
                if (newValue) {
                    var clean = newValue.toString().replace(/[^0-9\.]/g, '');
                    var decimalCheck = clean.split('.');
                    if (!angular.isUndefined(decimalCheck[1])) {
                        decimalCheck[1] = decimalCheck[1].slice(0, 2);
                        clean = decimalCheck[0] + '.' + decimalCheck[1];
                    }
                    if (parseInt(newValue) > 50000) {
                        toastr.info('Number can not be more than 50000.');
                        ngModelCtrl.$setViewValue(oldValue);
                        ngModelCtrl.$render();
                    } else {
                        ngModelCtrl.$setViewValue(clean);
                        ngModelCtrl.$render();
                    }
                }
            });

            element.bind('keypress', function (event) {
                if (event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
}]);

AngularJS指令用于有效数量和范围

1 个答案: