My goal is to enhance user experience by allowing input in custom currency values like '1.5M' instead of 1500000, and '1B' instead of 1000000000 on an input form dealing with large numbers. To achieve this, I've created a FormatServices service with two methods: currParse(value: string): number and
currFormat(value: number): stringTo implement this functionality, I have defined a custom currency directive as follows:
.directive("currency", function($filter, formatServices: FormatServices){
// convert to number
var p = function(viewValue){
if (angular.isDefined(viewValue)) {
return $filter('number')(formatServices.currParse(viewValue));
}
};
var f = function(modelValue){
if (angular.isDefined(modelValue)) {
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< HERE WHAT FILTER TYPE?
return $filter('???')(formatServices.currFormat(modelValue));
}
};
return {
require: 'ngModel',
link: function(scope, ele, attr, ctrl){
ctrl.$parsers.unshift(p);
ctrl.$formatters.unshift(f);
}
};
})
The challenge lies in determining the appropriate filter type for the annotated line. After exploring the available filter types in Ng, it was found that the number filter doesn't work due to its string output. The json filter works but adds double quotes around the output. Neither uppercase nor lowercase filters preserve the desired format such as having '100k' or '1.5M'. Since there is no specific text filter, further experimentation is needed to find the suitable filter type to make this implementation successful.