僅限輸入數字的角度指令

Question

我正在創建一個directive以限制輸入框僅接受數字。 它應該接受1-9999999999，但不能以0開頭。它可以工作，但是輸入第一個數字后，它可以接受所有數字和字符。 請幫助我解決此問題。它應該接受10，但不能接受01。為此，我的代碼是，

HTML：

<input type="text" ng-model="number" required="required" numbers-only="numbers-only" />

JS：

angular.module('myApp', []).directive('numbersOnly', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
       modelCtrl.$parsers.push(function (inputValue) {
           if (inputValue == undefined) return '' 
           var transformedInput = inputValue.replace(/^[^1-9]*/g, ''); 
           if (transformedInput!=inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
           }         

           return transformedInput;         
       });
     }
   };
});

function MyCtrl($scope) {
    $scope.number = ''
}

字段： 字段

Answer 1

只需在/[^0-9]+/g添加一個替代^0+即可刪除前導零：

var transformedInput = inputValue.replace(/^0+|[^0-9]+/g, ''); 
//                                         ^^^              

參見更新的小提琴 。

^0+與字符串開頭（ ^ ）處的1個或多個（ + ）零匹配。

Answer 2

我找到了這個工作的小提琴 （不是我創造的）。 希望這可以幫助。

指示：

fessmodule.directive('format', ['$filter', function ($filter) {
return {
    require: '?ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;


        ctrl.$formatters.unshift(function (a) {
            return $filter(attrs.format)(ctrl.$modelValue)
        });


        ctrl.$parsers.unshift(function (viewValue) {
            var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
            elem.val($filter(attrs.format)(plainNumber));
            return plainNumber;
        });
    }
};
}]);

PS我還沒有測試。

Answer 3

好吧，您只需要從模式中刪除第一個^ 。 這是更新的小提琴

用這個 -

replace(/[^1-9]*/g, '');

您可以在開始更新小提琴時使用下面的一個來限制0-

replace(/^0|[^0-9]/, '');