AngularJS - Динамически менять символ валюты на Фильтре?

Question

Вопрос фона:

У меня есть раскрывающийся, содержащий 4 различных вариантах выбора страны они являются: Великобритания (Соединенное Королевство), США (Соединенные Штаты Америки), FR (Франция), GER (на немецком языке). В зависимости от того, какое значение выпадающего значения выбрано, мне нужно отфильтровать цену на объекте Controllers Scope, чтобы отобразить правильный символ валюты, например:

Если я установил флажок в поле «FR», я бы ожидал увидеть «€» символ на фильтре:

Если бы я, чтобы выбрать «UK» я бы ожидать, чтобы увидеть «£» добавляется и так далее.

выпуска:

Как уже говорилось выше, у меня есть 4 разных стран, я могу выбрать и поэтому я должен быть в состоянии dynamcially изменения валюты фильтра.

Я попытался установить это модельную собственность на Scope, но он не работает до сих пор.

Кодекс:

В настоящее время я использую стандартные AngularJS Currency фильтра, как показано на рисунке:

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

maxTextVal это значение на объекте контроллеров Scope. В коде выше я жестко закодирован код евро (€), чтобы получить символ, именно это значение фильтра, что мне нужно динамически устанавливать.

Можно ли изменить это значение во время выполнения? Любая помощь будет оценена по достоинству.

Answer 1

Это можно изменить во время выполнения, но я не уверен, есть ли опция в валютном фильтре напрямую.

В любом случае, вы можете написать пользовательский фильтр, который с помощью $sce.trustAsHtml(value) для корректного отображения символа. Или вы могли бы также придать фильтр с currencyFilter в Вашей области и вызвать эту функцию и использовать $sce там.

Пожалуйста, посмотрите на демо ниже, или в этом fiddle.

angular.module('demoApp', []) 
 
\t .filter('currencyWithLocale', function(currencyFilter, $sce) { 
 
    \t return function(input, locale) { 
 
     \t locale = locale || {currency: '$'}; 
 
     \t return $sce.trustAsHtml(currencyFilter(input, locale.currency)); 
 
     } 
 
    }) 
 
\t .controller('mainCtrl', MainCtrl); 
 
    
 
function MainCtrl($sce) { 
 
\t var vm = this; 
 
    angular.extend(vm, { 
 
    \t total: 10.1, 
 
     locales: [{ 
 
     \t id:0, 
 
      short: 'GER', 
 
      currency: '€' 
 
     }, { 
 
     \t id:1, 
 
      short: 'FR', 
 
      currency: '€' 
 
     },{ 
 
     \t 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>

Answer 2

Вместо передачи буквального «€», передать переменную область, содержащие выбранную валюту:

{{maxTextVal | currency : selectedCurrency : 2}} 

Или, если у вас есть выбранная страна, и что страна содержит валюту:

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