Skip to content

nitishk1316/Angularjs-Directive-Accept-Number-Only

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

Angularjs Directive Accept Number Only

A angularjs directive which allows only numbers to be typed into a text box .

FEATURES


  • Accepts only numbers.
  • Accepts negative number.
  • Accepts floating Number
  • Control over Decimal Number - Add only numbers not floating number
  • Control over Negative Number - Can't add negative number
  • Decimal place upto

HOW TO USE


    just add "nks-only-number" and also include required parameter. 

    <input type="text" nks-only-number ng-model="mynumber" />

    <input type="text" nks-only-number ng-model="mynumber" decimal-upto="2" />

    <input type="text" nks-only-number ng-model="mynumber" decimal-upto="2" allow-negative="false" />

    <input type="text" nks-only-number ng-model="mynumber" allow-decimal="false" />

PARAMETERS


  • decimal-upto="2" //value will be number. -- Restrict decimal upto
  • allow-negative="false" // if donot want negative number put false as value otherwise donot include it
  • allow-decimal="false" // if donot want decimal number put false as value otherwise donot include it

Directive Code


    Add this directive in your application.
		
		app.directive('nksOnlyNumber', function () {
		    return {
		    	restrict: 'EA',
		        require: 'ngModel',
		        link: function (scope, element, attrs, ngModel) {   
		        	 scope.$watch(attrs.ngModel, function(newValue, oldValue) {
			              var spiltArray = String(newValue).split("");
			              
			              if(attrs.allowNegative == "false") {
			                if(spiltArray[0] == '-') {
			                  newValue = newValue.replace("-", "");
			                  ngModel.$setViewValue(newValue);
			                  ngModel.$render();
			                }
			              }

			              if(attrs.allowDecimal == "false") {
			                  newValue = parseInt(newValue);
			                  ngModel.$setViewValue(newValue);
			                  ngModel.$render();
			              }

			              if(attrs.allowDecimal != "false") {
			                if(attrs.decimalUpto) {
			                   var n = String(newValue).split(".");
			                   if(n[1]) {
			                      var n2 = n[1].slice(0, attrs.decimalUpto);
			                      newValue = [n[0], n2].join(".");
			                      ngModel.$setViewValue(newValue);
			                      ngModel.$render();
			                   }
			                }
			              }
              
              
			              if (spiltArray.length === 0) return;
			              if (spiltArray.length === 1 && (spiltArray[0] == '-' || spiltArray[0] === '.' )) return;
			              if (spiltArray.length === 2 && newValue === '-.') return;
              
		                /*Check it is number or not.*/
		                if (isNaN(newValue)) {
		                  ngModel.$setViewValue(oldValue);
		                  ngModel.$render();
		                }
		            });
		        }
		    };
		});

Next Version will include:


  • Min-Max for number

About

A angularjs directive which allows only numbers with decimal to be typed into a text box .

Resources

Stars

Watchers

Forks

Packages

No packages published