AngularJS - 动态更改过滤器上的货币符号?

AngularJS - Dynamically change currency symbol on a Filter?

问题背景:

我有一个下拉列表,其中包含 4 个不同的国家/地区选项,它们是:UK(英国)、US(美国)、FR(法国)、GER(德国)。根据 selected 的下拉值,我需要在我的 Controllers Scope 对象上过滤价格以显示正确的货币符号,例如:

如果我在复选框中 select 'FR',我希望在过滤器上看到“€”符号:

如果我愿意 select 'UK' 我希望看到附加的“£”等等。

问题:

如上所述,我有 4 个不同的国家可以 select 因此我需要能够 动态 改变货币过滤器。

我试图通过示波器上的模型 属性 进行设置,但到目前为止还没有成功。

代码:

目前我使用的是标准的AngularJSCurrency滤镜,如图:

       {{maxTextVal | currency : "€" : 2}}

maxTextVal 是控制器作用域对象上的值。在上面的代码中,我硬编码了欧元代码 (€) 以生成符号,我需要动态设置的就是这个过滤器值。

是否可以在 运行 时更改此值?任何帮助将不胜感激。

不是传递文字“€”,而是传递包含当前所选货币的范围变量:

{{maxTextVal | currency : selectedCurrency : 2}}

或者,假设您选择了一个国家,并且该国家包含一种货币:

{{maxTextVal | currency : selectedCountry.currency : 2}}

可以在 运行 时更改此设置,但我不确定是否有直接在货币过滤器中的选项。

无论如何,您可以编写一个使用 $sce.trustAsHtml(value) 的自定义过滤器来正确显示符号。或者您也可以将带有 currencyFilter 的过滤器注入您的范围并调用该函数并在那里使用 $sce

请查看下面的演示或此 fiddle

angular.module('demoApp', [])
 .filter('currencyWithLocale', function(currencyFilter, $sce) {
     return function(input, locale) {
         locale = locale || {currency: '$'};
         return $sce.trustAsHtml(currencyFilter(input, locale.currency));
        }
    })
 .controller('mainCtrl', MainCtrl);
    
function MainCtrl($sce) {
 var vm = this;
    angular.extend(vm, {
     total: 10.1,
        locales: [{
         id:0,
            short: 'GER',
            currency: '€'
        }, {
         id:1,
            short: 'FR',
            currency: '€'
        },{
         id:2,
            short: 'UK',
            currency: '£'
        }]
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl">
    <select ng-model="ctrl.selectedLocale" ng-options="locale as locale.short for locale in ctrl.locales">
    </select>
    <span ng-bind-html="ctrl.total | currencyWithLocale: ctrl.selectedLocale"></span> 
    <!--<br/>
    below is not working because it's not $sanitized.<br/>
    {{ctrl.total | currency: ctrl.selectedLocale.currency}}-->

</div>