AngularJS防止数字输入添加十进制值

我输入以下数字类型:

<input class="number text-center" type="number" step="1"
       ng-model="item.formattedQuantity"
       ng-disabled="item.discount === '100.00'"
       ng-change="change(item)"
       ng-blur="blur(item)" min="0" />

如何禁止用户添加十进制值?我尝试添加step=0.01ng-pattern="/^[0-9]+$/",但用户仍然可以放置1.531.56等值。

我该怎么办?

daluoxi 回答:AngularJS防止数字输入添加十进制值

您需要创建一个指令来实现这一目标。

app.directive('numericInput',function () {
    return  {
        restrict: 'A',link: function (scope,elm,attrs,ctrl) {
            elm.on('input',function (event) {
                var regex = RegExp('^[0-9]+$');
                if(regex.test(event.target.value)){
                    event.preventDefault(); 
                    return true;
                else {
                    event.preventDefault(); return false;
                }
            });
        }
    }
});

或者您可以尝试angularjs样式(found codepen here

app.directive('numericInput',function () {
    return {
        require: 'ngModel',element,attr,ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g,'');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

然后在您的html中

<input numeric-input class="number text-center" type="number" step="1"
       ng-model="item.formattedQuantity"
       ng-disabled="item.discount === '100.00'"
       ng-change="change(item)" ng-blur="blur(item)" min="0" />
本文链接:https://www.f2er.com/3050710.html

大家都在问