Directive Name: aDecimals
How to Use: Add the attribute: n-decimals=”n” where n is the number like 2,3…
If you want to restrict user to 2 decimal points, write like this: evo-decimals=”2″
Source Code:
The following code will restrict user to enter numeric value with decimal upto 4 place.
Javascript code
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { }); app.directive('nDecimals', [nDecimals]); function nDecimals() { return { restrict: 'A', link: function (scope, element, attr) { element.on('input', function (e) { // Read the attribute to know the 'N' number places var maxDecimal = Number(element.attr('n-Decimals')); //Read the enetered value var sal = element.val(); var parts; if (sal.indexOf(".") !== -1) { parts = sal.split("."); if (parts[1].length > maxDecimal) { element.val(sal.substr(0, sal.length - 1)); } } }); // destroy event. scope.$on('$destroy', function () { element.off('input'); }); } }; }
HTML code
<input type="number" n-decimals="4" ng-model="salary"/>
In the above directive we are using the ‘input’ event which is very similar to the ‘onchange’ event. The ‘input event is fired synchronously when the value of an ‘input’ or ‘textarea’ element is changed while ‘onchange’ occurs when the element loses focus, after the content has been change.