AngularJS 통화 필터 소수 / 센트 제거

program tip

AngularJS 통화 필터 소수 / 센트 제거

radiobox 2020. 11. 19. 08:03

AngularJS 통화 필터 소수 / 센트 제거

통화 필터의 출력에서 소수점 / 센트를 제거하는 방법이 있습니까? 나는 다음과 같이하고있다.

<div>{{Price | currency}}</div>

출력되는 내용 :

$ 1,000.00

대신 다음을 원합니다.

$ 1,000

통화 필터를 사용하여 수행 할 수 있습니까? 숫자 앞에 달러 기호를 붙일 수 있고 나만의 필터를 작성할 수 있다는 것을 알고 있지만 기존 통화 필터에 간단한 방법이 있기를 바랐습니다.

감사합니다.

업데이트 : 버전 1.3.0 부터 -currencyFilter : 선택 매개 변수로 fractionSize 추가, 커밋 및 업데이트 된 plunker 참조

{{10 | currency:undefined:0}}

두 번째 매개 변수이므로 현재 로케일 통화 기호를 사용하려면 undefined를 전달해야합니다.

업데이트 : 이것은 숫자 앞에 표시되는 통화 기호에 대해서만 작동합니다. 버전 1.2.9 부터 여전히 소수점 이하 두 자리로 하드 코딩됩니다.

다음 은 angular의 formatNumber 복사본을 사용하여 0 fractionSize 통화를 활성화하는 수정 된 버전입니다.

일반적으로 이것은 로케일 정의 또는 currencyFilter 호출에서 구성 할 수 있지만 지금은 ( 1.0.4 ) 소수점 이하 2 자리로 하드 코딩됩니다.

맞춤 필터 :

myModule.filter('noFractionCurrency',
  [ '$filter', '$locale',
  function(filter, locale) {
    var currencyFilter = filter('currency');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
      var value = currencyFilter(amount, currencySymbol);
      var sep = value.indexOf(formats.DECIMAL_SEP);
      if(amount >= 0) { 
        return value.substring(0, sep);
      }
      return value.substring(0, sep) + ')';
    };
  } ]);

주형:

<div>{{Price | noFractionCurrency}}</div>

예:

데모

업데이트 : 음수 처리시 버그 수정

질문이 꽤 오래된 것 같고 주어진 답변이 좋습니다. 그러나 (내 프로젝트에서 사용하는) 도움이 될 수있는 또 다른 대안이 있습니다.

이것은 통화 기호 접두사 및 양수 및 음수 값의 접미사로 매우 잘 작동합니다.

맞춤 필터 :

angular.module('your-module', [])
    .filter('nfcurrency', [ '$filter', '$locale', function ($filter, $locale) {
        var currency = $filter('currency'), formats = $locale.NUMBER_FORMATS;
        return function (amount, symbol) {
            var value = currency(amount, symbol);
            return value.replace(new RegExp('\\' + formats.DECIMAL_SEP + '\\d{2}'), '')
        }
    }])

주형:

<div>{{yourPrice| nfcurrency}}</div>

다른 로케일의 예 :

10.00 (en-gb)-> £ 10
20.00 (en-us)-> $ 20
-10.00 (en-us)-> ($ 10)
30.00 (da-dk)-> 30kr
-30.00 (DA-DK) -> -30 KR

미국 달러 와 덴마크 크로네에 대한 라이브 데모를보십시오 .

최신 정보

이 해결 방법은 AngularJS 1.2 및 이전 라이브러리 릴리스에 적합합니다. 현재 AngularJS와 1.3 당신이 사용할 수있는 통화를 세 번째 매개 변수 지정 분수의 크기와 포맷 - "숫자 소수점의에 금액을 반올림" .

AngularJS 현지화에서 오는 기본 통화 형식을 사용하려면 undefined( null또는 비어 있으면 작동하지 않음 )으로 설정된 통화 기호 (두 번째 매개 변수)를 사용해야 합니다. 미국 달러 및 덴마크 크로네 데모의 예 .

고려할 가치가있는 또 다른 점은 하나의 로케일 또는 한 가지 유형의 통화 만있는 경우 숫자 앞에 통화 기호를 넣은 다음 이와 같이 숫자 필터를 사용할 수 있다는 것입니다 (미국 통화의 경우).

  ${{Price | number:0}}

새 필터를 사용하지 않고 통화가 하나만있는 경우 더 많은 빠른 수정 솔루션입니다.

늦었지만 도움이 될 수도 있습니다.

{{value | currency : 'Your Symbol' : decimal points}}

출력이있는 몇 가지 예를 보겠습니다.

{{10000 | currency : "" : 0}}           // 10,000
{{10000 | currency : '$' : 0}}          // $10,000 
{{10000 | currency : '$' : 2}}          // $10,000.00 
{{10000 | currency : 'Rs.' : 2}}        // Rs.10,000.00
{{10000 | currency : 'USD $' : 2}}      // USD $10,000.00
{{10000 | currency : '#' : 3}}          // #10,000.000
{{10000 | currency : 'ANYTHING: ' : 5}} // ANYTHING: 10,000.00000

데모 보기

이것은 또 다른 유사한 솔루션이지만 소수점 .00은 제거하지만 다른 소수점은 그대로 둡니다.

$ 10.00 ~ $ 10

$ 10.20에서 $ 10.20

app.filter('noFractionCurrency', [ '$filter', '$locale', function(filter, locale) {
    var currencyFilter = filter('currency');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
        amount = amount ? (amount*1).toFixed(2) : 0.00;
        var value = currencyFilter(amount, currencySymbol);
        // split into parts
        var parts = value.split(formats.DECIMAL_SEP);
        var dollar = parts[0];
        var cents = parts[1] || '00';
            cents = cents.substring(0,2)=='00' ? cents.substring(2) : '.'+cents; // remove "00" cent amount
        return dollar + cents;
    };
}]);

앵귤러 버전 1.3 미만의 솔루션, i18n을 사용하는 경우 가장 간단한 방법은 다음과 같습니다.

$filter('number')(x,0) + ' ' +$locale.NUMBER_FORMATS.CURRENCY_SYM;

이렇게하면 로케일에 따라 올바른 구분 기호와 통화 기호로 숫자 형식이 지정됩니다.

또 다른 솔루션 인이 방법은 후행 0을 제거하고 가장 일반적인 통화에 적합한 통화 기호를 찾습니다.

{{10.00 | money : USD}} ~ $ 10

{{10.00 | money : EUR}} ~ € 10

/**
 * @ngdoc filter
 * @name money
 * @kind function
 *
 * @description
 * Formats a number as a currency (ie $1,234.56), removing trailing zeros and using the     real currency symbol when possible. When no currency symbol is provided, default
 * symbol for current locale is used.
 *
 * @param {number} amount Input to filter.
 * @param {string=} symbol Currency symbol or identifier to be displayed.
 * @returns {string} Formatted number. *
 */
app.filter('money', [ '$filter', '$locale', function (filter, locale) {
var currencyFilter = filter('currency');
var formats = locale.NUMBER_FORMATS;

var getCurrencySymbol = function (code) {
    switch (code.toUpperCase()) {
        case 'EUR': //Euro
            return '€';

        case 'USD': //Dólar americano
        case 'MXN': //Peso mejicano
        case 'CAD': //Dólar de Canadá
        case 'AUD': //Dólar australiano
        case 'NZD': //Dólar neozelandés
        case 'HKD': //Dólar de Hong Kong
        case 'SGD': //Dólar de Singapur
        case 'ARS': //Peso argentino
            return '$';

        case 'CNY': //Yuan chino
        case 'JPY': //Yen japonés
            return '¥';

        case 'GBP': //Libra esterlina
        case 'GIP': //Libras de Gibraltar
            return '£';

        case 'BRL': //Real brasileño
            return 'R$';

        case 'INR': //Rupia india
            return 'Rp';

        case 'CHF': //Franco suizo
            return 'Fr';

        case 'SEK': //Corona sueca
        case 'NOK': //Corona noruega
            return 'kr';

        case 'KPW': //Won de Corea del Norte
        case 'KRW': //Won de Corea del Sur
            return '₩';

        default:
            return code;
    }
};

return function (amount, currency) {
    var value;
    if (currency) {
        value = currencyFilter(amount, getCurrencySymbol(currency));
    }
    else {
        value = currencyFilter(amount);
    }

    //Remove trailing zeros
    var regex = new RegExp("\\" + formats.DECIMAL_SEP + "0+", "i");
    return value.replace(regex, '');
};
} ]);

AngularJS 1.2의 경우 간단히 결합 number하고 currency필터링 할 수 있습니다.

app.filter('noFractionCurrency', ['numberFilter', 'currencyFilter', function(numberFilter, currencyFilter) {
        return function(input, symbol) {
            var amount = numberFilter(input);
            return symbol + amount;
        };
    }]);

그리고 여기에서 가장 가까운 $ 1000로 반올림하려면 Live Demo :

var app = angular.module('angularjs-starter', []);

app.filter('noFractionRoundUpCurrency',
    [ '$filter', '$locale', function(filter, locale) {
      var currencyFilter = filter('currency');
      var formats = locale.NUMBER_FORMATS;
      return function(amount, currencySymbol) {
        var value = currencyFilter(amount, currencySymbol);
        var sep = value.indexOf(formats.DECIMAL_SEP);
        if(amount >= 0) { 
                    if (amount % 1000 < 500){
                        return '$' + (amount - (amount % 500));
                    } else {
                        return '$' + (amount - (amount % 500) + 500);          
                    }

        }
        else{
                    if (-amount % 1000 < 500){
                        return '($' + (-amount - (-amount % 500)) + ')';
                    } else {
                        return '($' + (-amount - (-amount % 500) + 500)+ ')';          
                    }
        }
      };
    } ]);

app.controller('MainCtrl', function($scope) {

});

정확히 내가 필요한 것!

Angular의 통화 필터를 완전히 대체하고 @Tom이 위에서 본 필터의 수정 된 버전을 사용하는 조건을 추가했습니다. 이 작업을 수행하는 더 좋은 방법이 있다고 확신하지만 지금까지는 잘 작동하는 것 같습니다.


'use strict';
angular.module('your-module')
  .filter('nfcurrency', [ '$filter', '$locale', function ($filter, $locale) {
    var currency = $filter('currency'), formats = $locale.NUMBER_FORMATS;
    return function (amount, symbol) {
      var value = currency(amount, symbol), valArr = value.split(formats.DECIMAL_SEP);
      if(parseInt(valArr[(valArr.length - 1)]) > 0) {
        return value;
      } else {
        return value.replace(new RegExp('\' + formats.DECIMAL_SEP + '\d{2}'), '');
      }
    };
  }]);

@Liviu T.가 게시 한 필터를 약간 수정하여 숫자와 특정 소수 자릿수 뒤에 기호가있는 통화를 허용합니다.

app.filter('noFractionCurrency',
[ '$filter', '$locale', function(filter, locale) {
  var currencyFilter = filter('currency');
  var formats = locale.NUMBER_FORMATS;
  return function(amount, num, currencySymbol) {
    if (num===0) num = -1;
    var value = currencyFilter(amount, currencySymbol);
    var sep = value.indexOf(formats.DECIMAL_SEP)+1;
    var symbol = '';
    if (sep<value.indexOf(formats.CURRENCY_SYM)) symbol = ' '+formats.CURRENCY_SYM;
    return value.substring(0, sep+num)+symbol;
  };
} ]);

예를 들면 :

{{10.234 | noFractionCurrency:0}}
{{10.55555 | noFractionCurrency:2}}

출력 :

$10
$10.56

데모

If you'd use angular-i18n (bower install angular-i18n), you could use a decorator to change the defaults in the locale files, like so:

$provide.decorator('$locale', ['$delegate',
  function ($delegate) {
    $delegate.NUMBER_FORMATS.PATTERNS[1].maxFrac = 0;
    $delegate.NUMBER_FORMATS.PATTERNS[1].minFrac = 0;
    return $delegate;
}]);

Note that this would apply to all currency filter uses in your code.

In Angular 4+

{{totalCost | currency : 'USD' : 'symbol' : '1.0-0' }}

참고URL : https://stackoverflow.com/questions/14782439/removing-angularjs-currency-filter-decimal-cents

'program tip' 카테고리의 다른 글

Rails 앱에서 force_ssl로 무한 리디렉션 루프가 발생하는 이유는 무엇입니까? (0)	2020.11.20
IE에서 로컬 저장소 콘텐츠보기 (0)	2020.11.20
매일 같은 시간에 작업을 수행하는 Python 스크립트 (0)	2020.11.19
jquery로 onclick 이벤트를 변경하는 방법은 무엇입니까? (0)	2020.11.19
Android에서 ListView를 투명하게 만드는 방법은 무엇입니까? (0)	2020.11.19

현재글AngularJS 통화 필터 소수 / 센트 제거

radiobox

AngularJS 통화 필터 소수 / 센트 제거

AngularJS 통화 필터 소수 / 센트 제거

'program tip' 카테고리의 다른 글

'program tip'의 다른글

티스토리툴바

AngularJS 통화 필터 소수 / 센트 제거

AngularJS 통화 필터 소수 / 센트 제거

'program tip' 카테고리의 다른 글

'program tip'의 다른글

관련글

티스토리툴바