<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div data-ng-app="testapp">
<form class="col-md-6">
<div class="form-group">
<label for="exampleInputEmail1">Positive Number</label>
<input class="form-control" valid-number ng-model="positiveNumber" placeholder="" allow-decimal="false" allow-negative="false" type="text">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Negative Number</label>
<input class="form-control" valid-number ng-model="negativeNumber" placeholder="" allow-decimal="false" allow-negative="true" type="text">
</div> <div class="form-group">
<label for="exampleInputEmail1">Positive Decimal Numbers Default Decimal-Upto 2</label>
<input class="form-control" valid-number ng-model="decimal" placeholder="" allow-decimal="true" allow-negative="false" type="text">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Positive Decimal Numbers Decimal-Upto 3</label>
<input class="form-control" valid-number ng-model="decimalUpto" placeholder="" allow-decimal="true" allow-negative="false" decimal-upto="3" type="text">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Negative Decimal Numbers Default Decimal-Upto 2</label>
<input class="form-control" valid-number ng-model="negativdecimal" placeholder="" allow-decimal="true" allow-negative="true" type="text">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Negative Decimal Numbers Decimal-Upto 3</label>
<input class="form-control" valid-number ng-model="negativdecimalUpto" placeholder="" allow-decimal="true" allow-negative="true" decimal-upto="3" type="text">
</div>
</form>
</div>
</body>
</html>
// Code goes here
var app = angular.module('testapp',[]);
app.controller('appController', function ($scope) {
$scope.positiveNumber = 0;
$scope.negativeNumber = 0;
$scope.decimal = 0;
$scope.decimalUpto = 0
$scope.negativedecimal = 0;
$scope.negativedecimalUpto = 0
$scope.total = 0;});
angular.module('testapp').directive('validNumber', function () {
return {
require: '?ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.on('keydown', function (event) {
var keyCode=[]
if(attrs.allowNegative == "true")
{ keyCode = [8, 9, 36, 35, 37, 39, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 109, 110, 173, 190,189];
}
else{
var keyCode = [8, 9, 36, 35, 37, 39, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110, 173, 190];
}
if(attrs.allowDecimal == "false") {
var index = keyCode.indexOf(190);
if (index > -1) {
keyCode.splice(index, 1);
}
}
if ($.inArray(event.which, keyCode) == -1) event.preventDefault();
else {console.log(2);
var oVal = ngModelCtrl.$modelValue || '';
if ($.inArray(event.which, [109, 173]) > -1 && oVal.indexOf('-') > -1) event.preventDefault();
else if ($.inArray(event.which, [110, 190]) > -1 && oVal.indexOf('.') > -1) event.preventDefault();
}
})
.on('blur', function () {
if (element.val() == '' || parseFloat(element.val()) == 0.0 || element.val() == '-') {
ngModelCtrl.$setViewValue('0.00');
}
else if(attrs.allowDecimal == "false")
{
ngModelCtrl.$setViewValue(element.val());
}
else{
if(attrs.decimalUpto)
{
var fixedValue = parseFloat(element.val()).toFixed(attrs.decimalUpto);}
else{ var fixedValue = parseFloat(element.val()).toFixed(2);}
ngModelCtrl.$setViewValue(fixedValue);
}
ngModelCtrl.$render();
scope.$apply();
});
ngModelCtrl.$parsers.push(function (text) {
var oVal = ngModelCtrl.$modelValue;
var nVal = ngModelCtrl.$viewValue;
console.log(nVal);
if (parseFloat(nVal) != nVal) {
if (nVal === null || nVal === undefined || nVal == '' || nVal == '-') oVal = nVal;
ngModelCtrl.$setViewValue(oVal);
ngModelCtrl.$render();
return oVal;
}
else {
var decimalCheck = nVal.split('.');
if (!angular.isUndefined(decimalCheck[1])) {
if(attrs.decimalUpto)
decimalCheck[1] = decimalCheck[1].slice(0, attrs.decimalUpto);
else
decimalCheck[1] = decimalCheck[1].slice(0, 2);
nVal = decimalCheck[0] + '.' + decimalCheck[1];
}
ngModelCtrl.$setViewValue(nVal);
ngModelCtrl.$render();
return nVal;
}
});
ngModelCtrl.$formatters.push(function (text) {
if (text == '0' || text == null && attrs.allowDecimal == "false") return '0';
else if (text == '0' || text == null && attrs.allowDecimal != "false" && attrs.decimalUpto == undefined) return '0.00';
else if (text == '0' || text == null && attrs.allowDecimal != "false" && attrs.decimalUpto != undefined) return parseFloat(0).toFixed(attrs.decimalUpto);
else if (attrs.allowDecimal != "false" && attrs.decimalUpto != undefined) return parseFloat(text).toFixed(attrs.decimalUpto);
else return parseFloat(text).toFixed(2);
});
}
};
});
/* Styles go here */