Question

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

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

我通过Google搜索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
  ....

先谢谢

Answer 1

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/

Answer 2

我修改了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/

正整数的Angular自定义指令

2 个答案: