AngularJS-在过滤器上动态更改货币符号? [英] AngularJS - Dynamically change currency symbol on a Filter?

问题描述

问题背景:

我有一个下拉菜单，其中包含4个不同的国家/地区选项，分别是:英国(英国)，美国(美国)，法国(法国)，德国(德国).根据选择的下拉值，我需要在Controllers Scope对象上过滤价格以显示正确的货币符号，例如:

I have a drop-down that contains 4 different country options these being: UK (United Kingdom), US (United States), FR (France), GER (German). Depending on which drop-down value is selected I need to filter a price on my Controllers Scope object to show the correct currency symbol, for example:

如果我在复选框中选择"FR"，则希望在过滤器上看到€"符号:

If I select 'FR' in the checkbox, I would expect to see the '€' symbol on the filter:

如果我选择英国"，我希望看到附加了£"，依此类推.

If I would to select 'UK' i would expect to see the '£' appended and so on.

问题:

如上所述，我可以选择4个不同的国家/地区，因此，我需要能够 动态 更改货币过滤器.

As stated above I have 4 different countries I can select and therefore I need to be able to dynamcially change the currency filter.

我试图通过Scope上的模型属性来设置它，但到目前为止还没有奏效.

I have attempted to set this by a model property on the Scope but It hasn't worked so far.

代码:

当前，我正在使用标准的AngularJS Currency过滤器，如下所示:

Currently I am using the standard AngularJS Currency filter, as shown:

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

maxTextVal是控制器Scope对象上的值.在上面的代码中，我已经硬编码了欧元代码(€)以产生该符号，我需要动态设置此过滤器值.

maxTextVal is the value on the controllers Scope object. In the code above I have hard-coded the euro code (€) to produce the symbol, it is this filter value that I need to dynamically set.

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

Is it possible to change this value at run-time? Any help would be appreciated.

推荐答案

可以在运行时更改此设置，但是我不确定货币过滤器是否直接提供了一个选项.

It's possible to change this at run-time but I'm not sure if there is an option at the currency filter directly.

无论哪种方式，您都可以编写使用$sce.trustAsHtml(value)来正确显示符号的自定义过滤器.或者，您也可以在范围内注入currencyFilter过滤器，然后调用该函数并在其中使用$sce.

Any way, you can write a custom filter that's using $sce.trustAsHtml(value) to correctly display the symbol. Or you could also inject the filter with currencyFilter to your scope and call that function and use $sce there.

请查看下面的演示或此小提琴.

Please have a look at the demo below or at this 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>

这篇关于AngularJS-在过滤器上动态更改货币符号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！