Подтвердить что ты не робот

Почему валютный фильтр AngularJS форматирует отрицательные числа с круглыми скобками?

Live Demo

Почему это:

# Controller
$scope.price = -10;

# View
{{ price | currency }}

приводит к ($10.00), а не к -$10.00?

4b9b3361

Ответ 1

Это популярный способ представления отрицательных валют. Wikipedia:

В бухгалтерском учете суммы задолженности часто представлены красными цифрами или числом в круглых скобках в качестве альтернативного обозначения для обозначения отрицательных чисел.

Вы можете увидеть в исходном коде Angular, где они это делают (negSuf/negPre):

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: '$'
      },

Ответ 2

Я знаю, что это старый вопрос, но принятый ответ отвечает только на то, почему это происходит, без конкретного решения проблемы. Я думаю, что "самый правильный способ" сделать это - использовать такой декоратор:

angular
    .module('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;
        }]);
      }]);

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

Ответ 3

Это работает лучше для меня, проверяя отрицательное число:

var app = angular.module('myApp');

app.filter('customCurrency', ["$filter", function ($filter) {       
    return function(amount, currencySymbol){
        var currency = $filter('currency');         

        if(amount < 0){
           return currency(amount, currencySymbol).replace("-", "(") + ')'
        }

        return currency(amount, currencySymbol);
    };
}]);

Ответ 4

Вы имеете в виду отображение - $10.00, а не ($ 10.00)?

По умолчанию, по крайней мере, угловая версия 1.2.1 должна отображаться с круглыми скобками. Например: (10,00 долларов США)).

Если это так, это моя ситуация. Я создал для этого настраиваемый фильтр:

var app = angular.module('myApp');

app.filter('customCurrency', ["$filter", function ($filter) {       
  return function(amount, currencySymbol){
     var currency = $filter('currency');         

     if(amount.charAt(0) === "-"){
        return currency(amount, currencySymbol).replace("(", "-").replace(")", ""); 
     }

     return currency(amount, currencySymbol);
  };

}]);

Таким образом, он делегирует встроенный фильтр валют и "украшает" или "не украшает" круглые скобки.

Я не мог найти способ изменить $LocaleProvider на лету. Если кто-то знает, пожалуйста, дайте мне знать.

веселит Леонардо Корреа

Ответ 5

Обновление: Angular 1.4 больше не использует круглые скобки для обозначения отрицательных значений, но теперь использует символ "-". Вот ссылка на обсуждение: https://github.com/angular/angular.js/issues/12870

Я использовал декоратор, как описано marc, чтобы вернуть .negPre и .negSuf для использования parens.

Ответ 6

Если вы не возражаете хранить скобки и просто хотите быстро и легко достичь этого, например: -($250.00) попробуйте следующее:

<ul ng-repeat="data in customers">
  <li>
    Balance: 
    <span ng-if="data.balance<0">-</span>
    <span ng-if="data.balance>0">+</span>
    {{data.balance | currency}}
  </li>
</ul>  

Если вы хотите удалить (), вы можете создать свой собственный фильтр или попробовать другие ответы.