La directive angulaire ignore l'entrée non numérique

Je dois écrire un code pour IE8. J'ai une ng-repeat créant une table remplie de:

<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 ne fera pas type = nombre

Je veux une directive qui ignore les traits de touches sur ce champ de saisie qui ne sont PAS des touches numériques …. ie …. 0 – 9

Je ne veux pas laisser l'utilisateur écrire abc et polluer le modèle, puis leur dire que la valeur est invalide. Je préfère ne pas leur laisser entrer de données qui ne sont pas valides en premier lieu.

HTML:

 <input production-qty type="text" maxlength="3" ng-model="qty1">

Directif:

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

Plunker

Voir aussi les filtres sur ng-model dans une entrée . Ma réponse ci-dessus est modélisée par la réponse de pkozlowski.opensource.

J'ai regardé ng-pattern, mais il ne filtre pas ce qui est montré dans la zone de texte. Il définit $scope.qty1 à undefined , mais les caractères indésirables sont visibles dans la zone de texte.

HTML:

 <input type="number" name="graduationYear" ng-model="gradYear" only-num>

Directif:

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

Incluez d' abord ce code dans le fichier js numericInput.js

Directive: –

 .directive('numeric', function() { return function(scope, element, attrs) { $(element[0]).numericInput({ allowFloat: true }); }; })

HTML: –

  <input type="text" numeric />

DEMO Numeric Demo

Pas de directive mais j'utilise juste:

manette:

  $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]">

Ce n'est pas une directive mais peut être utilisé dans la directive aussi