web-dev-qa-db-ja.com

テキスト入力はangularjsでの整数入力のみを許可します

HTML入力を設定したい[数値] <input type="number" />許可整数のみ入力（浮動ではない）。

基本的に、html input [number]は '。'を許可します。フロート入力のために入力する必要があり、私はそれを望んでいません。

AngularJSでそれを達成する簡単な方法はありますか？

javascriptangularjsangularjs-validation
8
Cheetah Felidae

これを実現する方法を次に示します。

  1. 入力タイプあり-'text'

    ディレクティブ：

    app.directive('onlyNumbers', function () {
    return  {
        restrict: 'A',
        link: function (scope, Elm, attrs, ctrl) {
            Elm.on('keydown', function (event) {
                if(event.shiftKey){event.preventDefault(); return false;}
                //console.log(event.which);
                if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
                    // backspace, enter, escape, arrows
                    return true;
                } else if (event.which >= 48 && event.which <= 57) {
                    // numbers 0 to 9
                    return true;
                } else if (event.which >= 96 && event.which <= 105) {
                    // numpad number
                    return true;
                } 
                // else if ([110, 190].indexOf(event.which) > -1) {
                //     // dot and numpad dot
                //     return true;
                // }
                else {
                    event.preventDefault();
                    return false;
                }
            });
        }
    }
});

    HTML：

    <input type="text" only-numbers>

  2. 入力タイプ-'number'

    ディレクティブ：

    app.directive('noFloat', function () {
return  {
    restrict: 'A',
    link: function (scope, Elm, attrs, ctrl) {
        Elm.on('keydown', function (event) {
          if ([110, 190].indexOf(event.which) > -1) {
                // dot and numpad dot
                event.preventDefault();
                return false;
            }
            else{
              return true;
            }
        });
    }
}
});

    HTML：<input type="number" step="1" no-float>

Plunker をチェックしてください。

11
Shyamal Parikh

パターンプロパティを使用：

<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>

デモをご覧ください： https://jsfiddle.net/JBalu/vfbgrd5n/

役立つかもしれません。

3
Jinna Balu

私はこれを何度も探しましたが、以前のプロジェクトでディレクティブを使用していましたが、最終的にangular jsがそれ自体を提供し、したがってを取り除くことができる方法を見つけましたディレクティブ。このリンクで提供されているこのコードを見てみましょう angularJs

そこに示されているコードは次のとおりです。

<script>
  angular.module('numberExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        value: 12
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Number:
    <input type="number" name="input" ng-model="example.value"
           min="0" max="99" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>
  <tt>value = {{example.value}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>
1
Yagnesh Khamar

完全に機能するサンプル：カスタムディレクティブ以​​下は問題なく動作します

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="AppCtrl">

  <input type="text" allow-numbers-only />

  <script>
    var app = angular.module("myApp", []);

    app.controller("AppCtrl", function($scope) {
      $scope.title = "App"
    })



    app.directive("allowNumbersOnly", function() {
      return {
        restrict: "A",
        link: function(scope, element, attrs) {
          element.bind("keydown", function(event) {
            if (event.keyCode == 8) {
              return false;
            } else if (!(event.keyCode > 47 && event.keyCode < 58) || event.shiftKey) {
              event.preventDefault();
              return false;
            }
          });



        }
      }
    });
  </script>

</body>

</html>
0
ibrahim mohamed

フィドルを見つけてください http://jsfiddle.net/8a4sg0mo/

angular.module('myApp', []).directive('numbersOnly', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
       modelCtrl.$parsers.Push(function (inputValue) {

       if (inputValue == undefined) return '' 
       var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
       if (transformedInput!=inputValue) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
       }         

       return transformedInput;         
   });
 }
   };
});

function MyCtrl($scope) {
    $scope.number = ''
}

純粋にangular jsを使用して行われます。

0
AurA