Text Input allow only Integer input in angularjs

Here is how this can be achieved.

1. With input type - 'text'

   Directive:

   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 >= 49 && event.which <= 57) {
                       // numbers
                       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. With input type - 'number'

   Directive:

   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>

Check out the Plunker

Please find the fiddle 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 = ''
}

It will allow only numbers to be entered, purely done using angular js.

input[type=number] by definition only accepts integers as input. Try it out yourself. Try typing in letters and it won't allow you.

There's no need for JavaScript as it's already built in. Did you perhaps mean input[type=text]?

You can accomplish that via angular directives. It would look something like this (not sure about my syntax though)

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

The syntax might have a few errors, but I will break down the basic formula.

Since we are working with an input element, it makes sense that we use an attribute directive. We can do this, by setting the restrict property to A.

Since we will be listening for keypress events, we should use the link function. We want to listen for the keydown event, to detect when a key is starting to be pressed.

To find if the user typed a number, we will use keyCodes, for which the number keys are 48 through 57 representing 0 through 9 respectively. However, we didn't account for special characters, which require hitting the number keys. So we make sure the shift key isn't being pressed either.

Then we can add this directive as an attribute on our input element.

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

Use pattern property:

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

please see the demo : https://jsfiddle.net/JBalu/vfbgrd5n/

may help.