问题背景:
我有一个下拉菜单,其中包含 4 个不同的国家/地区选项:UK(英国)、US(美国)、FR(法国)、GER(德国)。根据选择的下拉值,我需要过滤 Controller 范围对象上的价格以显示正确的货币符号,例如:
如果我在复选框中选择“FR”,我希望在过滤器上看到“€”符号:
如果我选择“UK”,我希望看到附加的“£”等等。
问题:
如上所述,我可以选择 4 个不同的国家/地区,因此我需要能够动态更改货币过滤器。
我尝试通过范围上的模型属性来设置它,但到目前为止还没有成功。
代码:
目前我正在使用标准的 AngularJS Currency
过滤器,如图所示:
{{maxTextVal | currency : "€" : 2}}
maxTextVal
是 Controller Scope 对象上的值。在上面的代码中,我硬编码了欧元代码 (€) 来生成符号,我需要动态设置这个过滤器值。
是否可以在运行时更改该值?任何帮助将不胜感激。
最佳答案
可以在运行时更改此设置,但我不确定货币过滤器是否有直接选项。
无论如何,您都可以编写一个使用 $sce.trustAsHtml(value)
的自定义过滤器来正确显示符号。或者,您也可以将带有 currencyFilter
的过滤器注入(inject)到您的作用域中,并调用该函数并在其中使用 $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>
关于AngularJS - 动态更改过滤器上的货币符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37779353/