Giter Site home page Giter Site logo

karkranikhil / angularjs-directive-accept-number-only Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nitishk1316/angularjs-directive-accept-number-only

0.0 2.0 0.0 3 KB

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

JavaScript 100.00%

angularjs-directive-accept-number-only's Introduction

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

DEMO


Accept Number Only.

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

angularjs-directive-accept-number-only's People

Contributors

gandaldf avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.