21

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を実行しません

数値キーではないその入力フィールドのキーストロークを無視するディレクティブが必要です....ie.... 0-9

ユーザーにabcと入力してモデルを汚染させてから、値が無効であることを伝えたくありません。そもそも無効なデータを入力させたくないのです。

4

4 に答える 4

43

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

プランカー

入力のng-modelのフィルターも参照してください。上記の私の答えは、pkozlowski.opensourceの答えをモデルにしています。

ng-patternを見ましたが、テキストボックスに表示されているものはフィルタリングされません。に設定$scope.qty1されますundefinedが、不要な文字がテキストボックスに表示されます。

于 2013-03-21T19:18:35.620 に答える
8

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

        });
    };
});
于 2015-01-23T14:26:34.470 に答える
0

まず、このコードをjsファイルに含めます numericInput.js

指令：-

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

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

    };
})

HTML：-

 <input type="text" numeric />

デモ Numeric Demo

于 2013-12-04T06:41:18.457 に答える
-2

ディレクティブではありませんが、私はただ使用します：

コントローラ：

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

ディレクティブではありませんが、ディレクティブでも使用できます

于 2014-08-20T10:42:58.817 に答える