<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="https:///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>
// 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);
});
}
};
});
app.directive('format', ['$filter', function($filter) {
return {
require: '?ngModel',
link: function(scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.unshift(function(a) {
return $filter(attrs.format)(ctrl.$modelValue)
});
elem.bind('blur', function(event) {
var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter(attrs.format)(plainNumber));
});
}
};
}]);
</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" format="currency">
</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" format="currency">
</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>
<input type="text" ng-model="test" format="number" />
<input type="text" ng-model="test" format="currency" />
</form>
</div>
</body>
</html>
