javascript angular.js - 在跨度中包装货币符号和十进制数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18767262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular.js - wrapping the currency symbol and decimal numbers in spans
提问by fxck
Can you possibly do something like this in angular?
你能用 angular 做这样的事情吗？
It's not quite possible to do this, as doesn't parse tags or something
这样做不太可能，因为不解析标签或其他东西
{{ 10000 | currency:"<span>$</span>" }}
{{ 10000 | currency:"<span>$</span>" }}
http://plnkr.co/edit/WluYoe2Ltmhmhvr8BBWX?p=preview
http://plnkr.co/edit/WluYoe2Ltmhmhvr8BBWX?p=preview
let alone somehow separate decimal number..
更不用说以某种方式分隔十进制数了..
The ideal result would be
理想的结果是
1 000 000<span class="dec">,00</span><span class="cur"></span>
1 000 000<span class="dec">,00</span><span class="cur"></span>
It's not really possible to do with any filter settings is it..?
任何过滤器设置都无法真正做到，是吗..？
I could try and modify angular's currency filter and the formatNumberfunction, but it still would take it as a text rather than a span element.
我可以尝试修改 angular 的货币过滤器和formatNumber函数，但它仍然会将其作为文本而不是 span 元素。
// edit you can actually do this http://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview
// 编辑你实际上可以做到这一点http://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview
<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>
<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>
still clueless about decimals though
虽然仍然对小数一无所知
采纳答案by fxck
It's actually possible to do this
实际上可以做到这一点
<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>
<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>
or wrap it around the native currency filter like this
或者像这样将它包裹在本地货币过滤器周围
app.filter('currencys', ['$filter', '$locale',
function($filter, $locale) {
return function (num) {
var sym = $locale.NUMBER_FORMATS.CURRENCY_SYM;
return $filter('currency')(num, '<span>'+ sym +'</span>');
};
}
]);
and then use it like this
然后像这样使用它
<span ng-bind-html-unsafe="10000 | currencys"></span>
<span ng-bind-html-unsafe="10000 | currencys"></span>
回答by zs2020
You can create a custom filter
您可以创建自定义过滤器
app.filter('euro', function () {
return function (text) {
text = text.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, " ");
var t = text + '<span class="desc">,00</span><span class="cur"></span>';
return t;
};
});
<span ng-bind-html-unsafe="1000000 | euro"></span>
The result will be
结果将是
1 000 000,00
(The regex is posted by @Paul Creasey in his answer https://stackoverflow.com/a/1990554/304319)
（正则表达式由@Paul Creasey 在他的回答https://stackoverflow.com/a/1990554/304319 中发布）
回答by Nikos Paraskevopoulos
Some locales have the currency sign prefixed, some postfixed, e.g. "one hundred euros" would be rendered " 100" or "100 ". What then?
一些地区有货币符号前缀，一些后缀，例如“一百欧元”将呈现“100”或“100”。然后怎样呢？
If you don't mind doing some parsing, however read on:
如果您不介意进行一些解析，请继续阅读：
The $localeservice contains the symbols required for currency formatting:
该$locale服务包含货币格式所需的符号：
$locale.NUMBER_FORMATS.CURRENCY_SYM
$locale.NUMBER_FORMATS.DECIMAL_SEP
(And there is more detailed info in $locale.NUMBER_FORMATS.PATTERNS[]- the value at position [1]is for currencies)
（还有更详细的信息$locale.NUMBER_FORMATS.PATTERNS[]- 头寸价值[1]是货币）
You could create a directive that uses the currencyfilter to obtain the initial formatted string, e.g. "1 000 000,50 "then search for $locale.NUMBER_FORMATS.CURRENCY_SYMand replace it with <span>{{ $locale.NUMBER_FORMATS.CURRENCY_SYM }}</span>, do something similar for the decimal separator and then set the innerHTMLof an element.
您可以创建一个使用currency过滤器获取初始格式化字符串的指令，例如，"1 000 000,50 "然后搜索$locale.NUMBER_FORMATS.CURRENCY_SYM并将其替换<span>{{ $locale.NUMBER_FORMATS.CURRENCY_SYM }}</span>为 ，对小数点分隔符执行类似操作，然后设置innerHTML元素的 。
