Ввод текста разрешает только целочисленный ввод в angularjs

Вот как этого можно достичь.

1. С типом ввода - "текст"

   Директива:

   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. С типом ввода - "число"

   Директива:

   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.

Используйте свойство шаблона:

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

посмотрите демо: https://jsfiddle.net/JBalu/vfbgrd5n/

может помочь.

Найдите скрипт 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.

Я искал это много раз, я использовал директивы в предыдущих проектах, но, наконец, нашел способ, который предоставляет 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>

input[type=number] по определению принимает только целые числа в качестве входных данных. Попробуйте сами. Попробуйте ввести буквы, и это не позволит вам.

Нет необходимости в JavaScript, так как он уже встроен. Возможно, вы имели в виду input[type=text]?

Вы можете сделать это с помощью угловых директив. Это будет выглядеть примерно так (хотя я не уверен в моем синтаксисе)

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

В синтаксисе может быть несколько ошибок, но я разберу основную формулу.

Поскольку мы работаем с элементом ввода, имеет смысл использовать директиву attribute. Мы можем сделать это, установив для свойства restrict значение A.

Поскольку мы будем прослушивать события нажатия клавиш, мы должны использовать функцию link. Мы хотим прослушивать событие keydown, чтобы определить, когда клавиша начинает нажиматься.

Чтобы узнать, набрал ли пользователь число, мы будем использовать keyCodes, для которых числовые клавиши от 48 до 57 представляют от 0 до 9 соответственно. Однако мы не учли специальные символы, которые требуют нажатия цифровых клавиш. Поэтому мы также убеждаемся, что клавиша Shift не нажата.

Затем мы можем добавить эту директиву в качестве атрибута нашего элемента ввода.

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