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 >= 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. 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

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.

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.