javascript - Angular 2 - How to get rid of extra decimals in angular binding? - Stack Overflow

admin管理员组

文章数量:1432602

i have such a statement in my view and the binding has value lets says 6970.87127381382131831 but, i want to limit it at 2 decimal at most. Since i am listing elements with ngFor, could not use an object to limit it with .toFixed(2). Thank you all !

{{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier }}

i have such a statement in my view and the binding has value lets says 6970.87127381382131831 but, i want to limit it at 2 decimal at most. Since i am listing elements with ngFor, could not use an object to limit it with .toFixed(2). Thank you all !

{{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier }}

I have tried the method below :

 {{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : 2 }}

Did not help me.

• javascript
• angular
• decimal
• two-way-binding

Share Improve this question Follow asked Aug 19, 2017 at 14:58 ozerozer 55211 gold badge77 silver badges2323 bronze badges 3

• 1 Did you try: | number:'1.0-2' (with the quotes)? – Martin Parenteau Commented Aug 19, 2017 at 15:03
• Trying in a minute. – ozer Commented Aug 19, 2017 at 15:05
• 1 Your method got it, thanks !! – ozer Commented Aug 19, 2017 at 15:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The following expression will allow you set decimal part to two digits:

 {{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : '1.2-2' }}

1.2-2 means: at least one digit before decimal point, at least 2 digits after decimal point but no more than 2 digits.

---

{{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : '1.0-2' }}

1.0-2 means: at least one digit before decimal point and no more than 2 digits after.

---

About the Angular DecimalPipes and configuration: https://angular.io/api/mon/DecimalPipe

as reported in official docs https://docs.angularjs/api/ng/filter/number

{{ number_expression | number : fractionSize}}

in your case:

 {{ (cartitem.original_price * cartitem.qty * cartitem.unit_multiplier) | number : 2 }}

if you want a fix number of digits you can create your own filter

App.filter('twoDecimal',function(input, scope){

return function(){

   return input.toFixed(2);

  }
})

and apply it

 {{ (cartitem.original_price * cartitem.qty * cartitem.unit_multiplier) | twoDecimal }}

本文标签： javascriptAngular 2How to get rid of extra decimals in angular bindingStack Overflow