我有完全相同的問題。我嘗試了「一切」，以便使用戶友好且不接受無效值。最後，我放棄了顯然簡單的解決方案，如ng-pattern，並在朋友@Teemu Turkia的幫助下，我們提出了integers-only指令。
它採用type="text"，同時支持min和max，不接受超出數字字符和-（作爲第一個字符的情況下，最低爲負）中鍵入。
此外，ng-model永遠不會分配無效值，如空字符串或NaN，只有給定範圍或null之間的值。
我知道，起初它看起來相當嚇人;）
HTML
// note: uses underscore.js
<body>
<form name="form">
<header>DD/MM/YYYY</header>
<section>
<input type="text"
name="day"
ng-model="day"
min="1"
max="31"
integers-only>
<input type="text"
name="month"
ng-model="month"
min="1"
max="12"
integers-only>
<input type="text"
name="year"
ng-model="year"
min="1900"
max="2016"
integers-only>
</section>
<section>
<span ng-show="form.day.$invalid">Invalid day</span>
<span ng-show="form.month.$invalid">Invalid month</span>
<span ng-show="form.year.$invalid">Invalid year</span>
</section>
</form>
</body>
的JavaScript
/**
* numeric input
* <input type="text" name="name" ng-model="model" min="0" max="100" integers-only>
*/
angular.module('app', [])
.directive('integersOnly', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
min: '=',
max: '='
},
link: function(scope, element, attrs, modelCtrl) {
function isInvalid(value) {
return (value === null || typeof value === 'undefined' || !value.length);
}
function replace(value) {
if (isInvalid(value)) {
return null;
}
var newValue = [];
var chrs = value.split('');
var allowedChars = ['0','1','2','3','4','5','6','7','8','9','-'];
for (var index = 0; index < chrs.length; index++) {
if (_.contains(allowedChars, chrs[index])) {
if (index > 0 && chrs[index] === '-') {
break;
}
newValue.push(chrs[index]);
}
}
return newValue.join('') || null;
}
modelCtrl.$parsers.push(function(value) {
var originalValue = value;
value = replace(value);
if (value !== originalValue) {
modelCtrl.$setViewValue(value);
modelCtrl.$render();
}
return value && isFinite(value) ? parseInt(value) : value;
});
modelCtrl.$formatters.push(function(value) {
if (value === null || typeof value === 'undefined') {
return null;
}
return parseInt(value);
});
modelCtrl.$validators.min = function(modelValue) {
if (scope.min !== null && modelValue !== null && modelValue < scope.min) { return false; }
return true;
};
modelCtrl.$validators.max = function(modelValue) {
if (scope.max !== null && modelValue !== null && modelValue > scope.max) { return false; }
return true;
};
modelCtrl.$validators.hasOnlyChar = function(modelValue) {
if (!isInvalid(modelValue) && modelValue === '-') { return false; }
return true;
};
}
};
});
結果
相關plunker這裏http://plnkr.co/edit/mIiKuw
什麼是你不想要'類型= 「數字」'的原因是什麼？由於數字輸入中出現微小的滾動按鈕？ – oKonyk
嗨，感謝您的留言。不，我可以用CSS隱藏這些。因爲'minlength'和'maxlength'' attrs'不能和'type =「number」'一起工作，如果我手動使用這些attrs，那麼需要通過jQuery進行更多的DOM操作，所以我試着看如果在輸入類型保持爲「文本」的情況下做到這一點，會有更多的角度。 –
如果你想讓提交的文本充當數字字段，我確實有一個解決方案，但不是以角度的方式，而是以JavaScript的方式，所有你需要做的就是檢查你的charCode是否在你指定的範圍內。如果你想讓我可以在這裏獲得代碼 –