Skip to content

Instantly share code, notes, and snippets.

@NishiBangar
Last active May 17, 2022 23:54
Show Gist options
  • Save NishiBangar/a2ead6efa3081f0b03d3bf8bedf3f254 to your computer and use it in GitHub Desktop.
Save NishiBangar/a2ead6efa3081f0b03d3bf8bedf3f254 to your computer and use it in GitHub Desktop.
Angular directive to format numeric values. Trasform numbers in thousands with "K" and in millions to "M" ( 1000-990000 --> K and 1000000 >= ---> M )
// HTML
<!-- Directive to Format value to ( Charges CurrencyType ) -->
<format-transaction format-type = "charges" currency-type = "{{currencyType}}" transaction-charge = "{{transactionCharge}}" transaction-limit = "" transaction-period = "" extra-transactions = "" extra-transaction-charge="">
</format-transaction>
// Angular Controller
app.directive('formatTransaction', function() {
return {
restrict : 'E',
scope: {
formatType : '@',
currencyType : '@',
extraTransactions: '@',
extraTransactionCharge: '@',
transactionLimit: '@',
transactionPeriod: '@',
transactionCharge: '@'
},
template: "<span ng-if = \x22formatType == 'charges/transactions' \x22 > {{finalResult}} <br> transactions </span>" +
"<span ng-if = \x22formatType == 'transactions/period' \x22> {{finalResult}} </span>" +
"<span ng-if = \x22formatType == 'charges' \x22> {{finalResult}} </span>",
controller: ['$scope', function($scope){
$scope.etcValue = ""; // Final Extra Transaction Charge value
$scope.etValue = ""; // Final Extra Transactions value
$scope.beforeDec = "";
$scope.afterDec = "";
$scope.stringValue = "";
$scope.finalResult = ""; // Final format Result
// If Format-Type is "Charges/Trasactions"
if($scope.formatType == "charges/transactions" ){
// Format ExtraTransactionChanrge value to '1000-990000 --> K and 1000000 >= --> M' format
// Get formated ExtraTransactionChanrge
$scope.etcValue = formatValue(parseInt($scope.extraTransactionCharge)); // Format Value
// Format ExtraTransactions value to '1000-990000 --> K and 1000000 >= --> M' format
// Get formated ExtraTransactions
$scope.etValue = formatValue(parseInt($scope.extraTransactions)); // Format Value
// Final formated Transactions field value
$scope.finalResult = $scope.etcValue +" "+ $scope.currencyType +"/"+ $scope.etValue ;
}
// If Format-Type is "Trasactions/Period"
else if($scope.formatType == "transactions/period" ){
$scope.finalResult = formatValue(parseInt($scope.transactionLimit)); // Format Value
$scope.finalResult = $scope.finalResult + "/" + $scope.transactionPeriod;
}
// If Format-Type is "charges" -> ( <Charges> <Currency Type> )
else if($scope.formatType == "charges" ){
$scope.finalResult = formatValue(parseInt($scope.transactionCharge)); // Format Value
$scope.finalResult = $scope.finalResult + " " + $scope.currencyType;
}
//**********************************
//**** Function to Format value ****
//**********************************
function formatValue (value){
$scope.result = "";
// Format value to '1000-990000 --> K and 1000000 >= --> M' format
// If value is > 999 AND < 1000000 --> 1K - 999.99K
if(value > 999 && value < 1000000 ){
// If final value has no decimal value
if( (value % 1000) == 0 ){
$scope.result = (value / 1000).toString() + "K";
}
else { // If final value has decimal value
$scope.stringValue = (value / 1000).toString() ;
$scope.beforeDec = $scope.stringValue.slice(0, $scope.stringValue.indexOf("."));
$scope.afterDec = $scope.stringValue.substr($scope.stringValue.indexOf(".") + 1, 2); // Extract 2 digits post decimal point
$scope.result = $scope.beforeDec + "." + $scope.afterDec + "K";
}
}
// If value is >= 1000000 and beyound --> 1M
else if ( value >= 1000000 ){
// If final value has no decimal value
if((value % 1000000) == 0 ){
$scope.result = (value / 1000000).toString() + "M";
}
else { // If final value has decimal value
$scope.stringValue = (value / 1000000).toString() ;
$scope.beforeDec = $scope.stringValue.slice(0, $scope.stringValue.indexOf("."));
$scope.afterDec = $scope.stringValue.substr($scope.stringValue.indexOf(".") + 1, 2); // Extract 2 digits post decimal point
$scope.result = $scope.beforeDec + "." + $scope.afterDec + "M";
}
}
else { // If value is < 1000
$scope.result = value.toString();
}
return $scope.result;
}
}]
}
});
@NishiBangar
Copy link
Author

Format numeric values to the following,

  • 0 - 999 ---> 0-999
  • 1000 - 999999 ---> 1K - 999K
  • 1000000 - 10000000 ---> 1M - 10M
  • 100000000 - and beyond ---> 10M - xM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment