Press "Enter" to skip to content

Angular Directive Allowing Only Digits In Input | ng-digits

ng-digits is a lightweight Angular 1.x directive that only allows numbers typed into the input field.

directives in angular, angular input number only directive, angular directive example, custom directives in angular, directive input angular, component directives example

How to make use of it:

Install

bower install ng-digits

Just create options and set directives.

<input 
  type="text" 
  ng-model="testModel" 
  ng-digits="digitsOptions" />
$scope.digitsOptions = {
  maxValue: 500,
  minValue: 0,
  parseToNumber: false,
  allowedLeadingZeros: true,
  thousandsSeparator: '\''
};
/**
     * Decimal separator
     * @type {String}
     */
    this.decimalSeparator = '.';

    /**
     * Thousands separator
     * @type {String}
     */
    this.thousandsSeparator = ' ';

    /**
     * Decimal places (if > 0, number has type float, otherwise int)
     * @type {Number}
     */
    this.decimalCount = 0;

    /**
     * If we should pad model value to decimalcount
     * eg. 3.2 => 3.20, 4 => 4,00
     * @type {Boolean}
     */
    this.padToDecimalCount = false;

    /**
     * Maximum value for input
     * @type {Number|null}
     */
    this.maxValue = null;

    /**
     * Minimum value for input
     * @type {Number|null}
     */
    this.minValue = null;

    /**
     * If true, ng-model will have Number, otherwise String
     * @type {Boolean}
     */
    this.parseToNumber = true;

    /**
     * If true, we allow to have leading zeros in ng-model
     * has no sense, if parseToNumber is set to true
     * @type {Boolean}
     */
    this.allowedLeadingZeros = false;

    /**
     * Structure of this object:
     * {
     *     inputevent: fn()
     * }
     * 
     * for example: 
     * {
     *     keydown: function(event, ngDigitsConfig, ngModelCtrl, eventThis){ // all passed arguments
     *         console.log(event)
     *     }
     * }
     * 
     * the return statement of this fn will be returned in original event
     * 
     * @type {Object}
     */
    this.eventHandlers = {};

digital input directive for angular, ng-digits Plugin/Github


See Demo And Download

Official Website(dzastin): Click Here

This superior jQuery/javascript plugin is developed by dzastin. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.