码疯窝

AngularJS currency filter 负数显示问题.

2015/07/06 23:02:11    分类: 技术随笔    1人评论 次浏览

意外发现angularjs 自带的currency filter 对于负数的处理并不是我们想要的.
以下是测试图:
angularjs1

有以下两种解决方案:
1: 自定义一个currency filter. 安全, 但每次执行都要重复运行一次.

var app = angular.module('testApp');
app.filter('customCurrency', ['$filter', function ($filter) {       
    return function(amount){
        var rst = $filter('currency').apply(this, arguments);
        return amount >= 0 ? rst : rst.replace('(', '-').replace(')', '')
    };
}]);

2: 利用decorator重写$locale 中 currency 的配置. 影响全局, 但是只执行一次.

var app = angular.module('testApp');
app.config(['$provide', function($provide) {
    $provide.decorator('$locale', ['$delegate', function($delegate) {
        if ($delegate.id === 'en-us') {
            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '-\u00A4';
            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '';
        }
        return $delegate;
    }]);
}]);

测试结果:
angularjs2

同时附上关键部分angularjs 的代码, 便于理解第二个方法.

function $LocaleProvider(){
    this.$get = function() {
        return {
            id: 'en-us',

            NUMBER_FORMATS: {
            DECIMAL_SEP: '.',
            GROUP_SEP: ',',
            PATTERNS: [
            { // Decimal Pattern
                minInt: 1,
                minFrac: 0,
                maxFrac: 3,
                posPre: '',
                posSuf: '',
                negPre: '-',
                negSuf: '',
                gSize: 3,
                lgSize: 3
            },{ //Currency Pattern
                minInt: 1,
                minFrac: 2,
                maxFrac: 2,
                posPre: '\u00A4',
                posSuf: '',
                negPre: '(\u00A4',
                negSuf: ')',
                gSize: 3,
                lgSize: 3
            }
            ],
            CURRENCY_SYM: '$'
        },
继续查看有关 技术随笔的文章

1个访客评论

  1. yameimei

    拜读一下,哈哈

    qweqwe Reply