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>
问题背景:
我有一个下拉列表,其中包含 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>