Last active
May 17, 2022 23:54
-
-
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 )
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
}] | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Format numeric values to the following,