AngularJs gives WRONG result when multiply by 100

Question

rank.js

$scope.ranks = [{id: 1, rank:1, cost:0.01, days: 3},
    {id: 2, rank:2, cost:0.009, days: 3},
    {id: 3, rank:3, cost:0.008, days: 3},
    {id: 4, rank:4, cost:0.007, days: 3},
    {id: 5, rank:5, cost:0.006, days: 3},
    {id: 6, rank:6, cost:0.005, days: 3},
    {id: 7, rank:7, cost:0.004, days: 3},
    {id: 8, rank:8, cost:0.003, days: 3},
    {id: 9, rank:9, cost:0.002, days: 3},
    {id: 10, rank:10, cost:0.001, days: 3}
    ]

rank.html

     <div ng-repeat="rank in ranks">
            <h2>លេខរៀងទី {{rank.rank}} សេវា {{rank.cost * 100}}% = ${{100 * rank.cost}}</h2>            
            <p>Rank Number {{rank.rank}} Fee {{rank.cost * 100}}% = ${{100 * rank.cost}}</p>
            <p>កន្លែងមិនទំនេរ Not Available</p>     
     </div>

In Browser: rank.html

Why does rank number 2 and 4 produce wrong result? How can I fix it?

Thanks.

enter image description here

The problem is not AngularJS; it is how floating-point numbers work in JavaScript. See http://stackoverflow.com/questions/588004 for more. — DocMax, Jul 08 '15 at 06:43
@Vicheanak, If you found my answer is useful, don't forget to upvote — Vineet, Jul 08 '15 at 06:49

score 2 · Answer 1 · answered Jul 08 '15 at 06:45

2

You should filter your digits first by using number filter

If the input is null or undefined, it will just be returned. If the input is infinite (Infinity/-Infinity) the Infinity symbol '∞' is returned. If the input is not a number an empty string is returned.

${{data.price * rank.cost | number}}

You can pass fraction size too. like

 ${{data.price * rank.cost | number : 2}}

answered Jul 08 '15 at 06:45

Vineet

4,525
3
23
42

it doesn't work when I change the value of data price to 100 – Vicheanak Jul 08 '15 at 06:57
Show me your syntax please. – Vineet Jul 08 '15 at 06:58
Rank Number {{rank.rank}} Fee {{rank.cost * 100 | number : 2}}% = ${{data.price * rank.cost}} – Vicheanak Jul 08 '15 at 07:05
1

try `{{(rank.cost * 100) | number : 2}}% = ${{data.price * rank.cost}}` – Vineet Jul 08 '15 at 07:07
Working great now! Thanks – Vicheanak Jul 08 '15 at 07:10
Now you can understand what you were missing before, right. – Vineet Jul 08 '15 at 07:12

AngularJs gives WRONG result when multiply by 100

1 Answers1