我必须为 IE8 编写一些代码。我有一个 ng-repeat 创建一个充满以下内容的表格：
<input production-qty type="text" class="input-mini" maxlength="3" ng-model="day.qtyA" ui-event="{ blur : 'updateProduction(day)' }" ng-disabled="day.type=='H'">
IE8 不会做 type=number
我想要一个指令，该指令将忽略该输入字段上不是数字键的击键......即......0 - 9
我不想让用户键入 abc 并污染模型，然后告诉他们该值无效。我宁愿不让他们输入任何一开始就无效的数据。
HTML：
<input production-qty type="text" maxlength="3" ng-model="qty1">
指示：
app.directive('productionQty', function() {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
var transformedInput = text.replace(/[^0-9]/g, '');
console.log(transformedInput);
if(transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput; // or return Number(transformedInput)
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});
另请参阅input 中 ng-model 的过滤器。我上面的答案是模仿 pkozlowski.opensource 的答案。
我查看了 ng-pattern，但它没有过滤文本框中显示的内容。它设置$scope.qty1为undefined，但不需要的字符在文本框中可见。
HTML：
<input type="number" name="graduationYear" ng-model="gradYear" only-num>
指示：
directive('onlyNum', function() {
return function(scope, element, attrs) {
var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
element.bind("keydown", function(event) {
//console.log($.inArray(event.which,keyCode));
if ($.inArray(event.which, keyCode) === -1) {
scope.$apply(function() {
scope.$eval(attrs.onlyNum);
event.preventDefault();
});
event.preventDefault();
}
});
};
});
首先将此代码包含在 js 文件中 numericInput.js
指令：-
.directive('numeric', function() {
return function(scope, element, attrs) {
$(element[0]).numericInput({ allowFloat: true });
};
})
HTML :-
<input type="text" numeric />
演示 Numeric Demo
不是指令，但我只使用：
控制器：
$scope.blockNonNumber = function (val, field){
$scope[field] = val.toString().replace(/[^0-9]/g, '');
}
html：
<input type="text" ng-model="price" ng-change="blockNonNumber(price, 'price')" pattern="[0-99]">
它不是指令，但可以在指令中使用