dyrektywa kątowa ignoruje nieliczbowe dane wejściowe

Question

Muszę napisać kod dla IE8. Mam NG-repeat tworzenia tabeli wypełnionej:

<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 nie zrobi typ = numer

chcę dyrektywę, która będzie ignorować naciśnięć tej dziedzinie wejść, które nie klawisze numeryczne. ... ie .... 0 - 9

Nie chcę pozwolić użytkownikowi wpisać abc i zanieczyszczać modelu, a następnie powiedzieć im, że wartość jest nieprawidłowa. Wolałbym, żeby nie podawali żadnych danych, które nie są ważne w pierwszej kolejności.

Answer 1

HTML:

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

dyrektywa:

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

Zobacz również filters on ng-model in an input. Moja powyższa odpowiedź jest wzorowana na odpowiedzi pkozlowski.opensource.

Przyjrzałem się wzorowi ng, ale nie filtrowałem tego, co widać w polu tekstowym. Ustawia ona $scope.qty1 na undefined, ale niepożądane znaki są widoczne w polu tekstowym.

Answer 2

Pierwszy to ten kod w pliku js numericInput.js

dyrektywy: -

.directive('numeric', function() { 
    return function(scope, element, attrs) { 

     $(element[0]).numericInput({ allowFloat: true }); 

    }; 
}) 

HTML: -

<input type="text" numeric /> 

DEMONumeric Demo

Answer 3

nie dyrektywy, ale używam tylko:

kontroler:

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

to nie dyrektywy, ale mogą być używane w dyrektywie jako wellside

Answer 4

HTML:

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

dyrektywa:

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

     }); 
    }; 
});