1

我的应用程序中有文本字段，它应该只接受正整数。（没有小数，没有负数）。基本上我想限制用户只能在 1 到 9999 之间输入。

<input type="text" min="0" max="99" number-mask="">

我从谷歌搜索jsfiddle中发现它接受负整数并且它不适用于 Internet Explorer。

我没有编写指令的经验。目前我也在学习角度。（我使用 typscript 在我的 .net mvc 项目中生成角度）

var app = angular.module('myApp', []);

app.directive('numberMask', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).numeric();
        }
    }
});

在这段代码中是否可以检查是否有负面影响？就像是

if(element <0 && element.lenth > 4)
  .....
else
  ....

提前致谢

4

2 回答 2

3 
angular.module('myapp', [])
.directive('numberMask', function() {
    return function(scope, element, attrs) {
        var min = parseInt(attrs.min, 10) || 0,
            max = parseInt(attrs.max, 10) || 10, 
            value = element.val();
        element.on('keyup', function(e) {
            if (!between(element.val(), min, max)) {
               element.val(value);
            } else {
                value = element.val();
            }
        });

        function between(n, min, max) { return n >= min && n <= max; }
    }
});

http://jsfiddle.net/9HgBY/

于 2013-10-02T04:47:27.347 回答
1

我修改了 Adrians 的答案以支持使用 ng-model。它很可能不是最漂亮的代码，但它完成了工作。

angular.module('myapp', [])
.directive('numberMask', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {   
            var oldValue = null;
            scope.$watch(attrs.ngModel, function (newVal, oldVal) {
                var min = parseInt(attrs.min) || 0;
                var max = parseInt(attrs.max) || 10;
                if (!between(newVal, min, max)) {
                    if (newVal > max)
                        ctrl.$setViewValue(max);
                    else if (newVal < min)
                        ctrl.$setViewValue(min);
                    else
                        ctrl.$setViewValue(oldValue);
                    ctrl.$render();
                }else{
                    oldValue = newVal;
                }
            }, true);

            function between(n, min, max) { return n >= min && n <= max; }
        }
    };
});

这是阿德里安摆弄我的补充http://jsfiddle.net/9HgBY/3/

于 2013-11-09T14:03:01.647 回答