正整數的角定製指令

我在我的應用程序中只能接受正整數的文本字段（無小數，無負數）。基本上我想限制用戶只輸入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 
    ....

由於提前

來源

2013-10-02 yohan.jayarathna

試試這個男人：http://stackoverflow.com/a/20368741/2837412 –

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-02 04:47:27 Adrian

由於這是偉大的。但它仍然接受小數值例如：9.365 –

您可以更改之間的函數來驗證和驗證您的輸入 – Adrian

我喜歡解決方案的簡單性，但是如果您在輸入中使用ng-model ，因爲無論此驗證功能如何，模型仍會更改。 –

我修改Adrians答案，以支持使用NG-模型。它最可能不是最漂亮的代碼，但它完成了工作。

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; } 
     } 
    }; 
});

這裏的Adrians撥弄我的補充http://jsfiddle.net/9HgBY/3/

來源

2013-11-09 14:03:01

正整數的角定製指令

回答

相關問題