AngularJS:我可以使用哪种过滤器类型来创建自定义货币指令?

时间:2017-08-04 14:24:36

标签: angularjs typescript

我有一个输入表单,其中包含数百,数百万,数十亿等货币值。为了使用户友好,我希望显示这些自定义输入字段并让用户输入例如' 1.5M'而不是1500000,' 1B'而不是1000000000等。为此,我使用两种方法FormatServicescurrParse(value: string): number创建了currFormat(value: number): string服务,他们按照自己的意愿行事,即在模型和显示值之间进行转换,然后返回。

现在我按如下方式定义自定义货币指令:

.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);
        }
    };
})

在带注释的行中,我需要一个过滤器类型。查看我使用number尝试过的available filter types in Ng但由于是字符串输出而无法正常工作。 json过滤器类型有效,但输出包含双引号。 uppercaselowercase无法正常工作,因为它们会破坏我的格式,例如我可以有100k或1.5M。没有text过滤器,所以我不知道该填写什么来让这个工作......

1 个答案:

答案 0 :(得分:1)

您可以自己制作过滤器。 这个例子构成了一个IntegerCurrency。

.filter('myCurrency', ['$filter', function ($filter) {
  return function(input) {
    input = parseFloat(input);
    if(input % 1 === 0) {
      input = input.toFixed(0);
    }
    return '$' + input;
    //you can change $ or € put ',' '.'  '-' or decorate whate ever the output.
  };
}])