Negative numbers in AngularJS

Negative Currency in AngularJS

Image source:

I am working on an AngularJS app that includes a table of transactions, where the user can have a negative or positive balance.

Of course the easiest way to show the numbers formatted, is by using the built in currency filter, in the html: {{ balance | currency }} .

But today when testing the app I found out that angular displays a negative number filtered by the currency filter like this: ($10.00) instead of: -$10.00 .

Apparently this is a popular way to represent negative currencies.

In bookkeeping, amounts owed are often represented by red numbers, or a number in parentheses, as an alternative notation to represent negative numbers. — Wikipedia :

But what if my users aren’t used to this ‘popular’ way?

Basically we have three options:

  1. Create a custom filter.
  2. Override the angular defaults in the run
  3. Decorator config

Creating a custom filter.


  • easy to implement.


  • extra watchers, running multiple times.
  • need to change all current files using default filter to custom filter.

Override the defaults in the run phase.


  • runs only once.
  • no need to change any current files.


  • The initial value is already set, and then we are overriding it, so it is a bit of a waste.

Add a Decorator in the config phase.


  • runs only once.
  • no need to change any current files.
  • Update the values before the app loads.


  • A bit longer code.

I personally would recommend the last option, but feel free to choose the one you prefer.

Happy coding.

codeburst稿源:codeburst (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Negative numbers in AngularJS

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录