![GER]( "GER")
本文介绍了AngularJS - 动态更改过滤器上的货币符号?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题背景:
我有一个下拉菜单，其中包含 4 个不同的国家/地区选项，它们是:UK(英国)、US(美国)、FR(法国)、GER(德国).根据选择的下拉值，我需要在我的 Controllers Scope 对象上过滤价格以显示正确的货币符号，例如:
如果我在复选框中选择FR"，我希望在过滤器上看到€"符号:
如果我想选择英国"，我希望看到附加的£"等等.
问题:
如上所述，我可以选择 4 个不同的国家/地区，因此我需要能够动态更改货币过滤器.
我曾尝试通过 Scope 上的模型属性来设置它，但到目前为止还没有奏效.
代码:
目前我使用的是标准的 AngularJS Currency 过滤器，如下所示:
{{maxTextVal |货币:&欧元"；:2}}
maxTextVal 是控制器 Scope 对象上的值.在上面的代码中，我对欧元代码 (€) 进行了硬编码以生成符号，我需要动态设置这个过滤器值.
是否可以在运行时更改此值?任何帮助将不胜感激.
解决方案
可以在运行时更改此设置，但我不确定货币过滤器是否有直接选项.
无论如何，您都可以编写一个使用 $sce.trustAsHtml(value) 的自定义过滤器来正确显示符号.或者您也可以将带有 currencyFilter 的过滤器注入您的作用域并调用该函数并在那里使用 $sce.
请查看下面的演示或此 fiddle.
angular.module('demoApp', []).filter('currencyWithLocale', function(currencyFilter, $sce) {返回函数(输入，语言环境){语言环境 = 语言环境 ||{货币:'$'};返回 $sce.trustAsHtml(currencyFilter(input, locale.currency));}}).controller('mainCtrl', MainCtrl);函数 MainCtrl($sce) {var vm = 这个；角度.扩展(虚拟机，{总计:10.1，语言环境:[{编号:0，简短: '德国',货币:'&欧元;'}, {编号:1，短:'FR'，货币:'&欧元;'},{编号:2，简短: '英国',货币:'£'}]});}
<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"></选择><span ng-bind-html="ctrl.total |currencyWithLocale: ctrl.selectedLocale"></span><!--<br/>下面不起作用，因为它没有经过 $sanitized.<br/>{{ctrl.total |货币:ctrl.selectedLocale.currency}}-->
Question Background:
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:
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.
The Issue:
As stated above I have 4 different countries I can select and therefore I need to be able to dynamcially change the currency filter.
I have attempted to set this by a model property on the Scope but It hasn't worked so far.
The Code:
Currently I am using the standard AngularJS Currency filter, as shown:
{{maxTextVal | currency : "€" : 2}}
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.
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 - 动态更改过滤器上的货币符号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！