0

So I have a simple form that provides a product cost, markup and final sale price.

However, angularjs is not returning the correct value for what I am providing it.

Consider the following:

I have a product that costs me $50.00 to get in my store.

To make a profit, I mark this product up 30% or .30.

So my final sale price to my customers would be $65.00

To figure this out we use a simple math calculation like so: 

Item Cost + (Item Cost x Markup Percentage) = Price 

$50.00 + ($50.00 x .30) = $65.00

So in my HTML I have a simple form

<form>
  <input type="text" ng-model="pr.cost" class="form-control" placeholder="Cost" />
  <input type="text" ng-model="pr.markup" class="form-control" placeholder="Markup %" />
  <input type="text" class="form-control" placeholder="{{pr.type}} Sale" value="{{pr.cost+(pr.cost*pr.markup)|currency}}" readonly/>
</form>

When the numbers I gave above are entered into this form, I get the following as a result:

Cost: $50
Markup: .30
Sale Price: $5,015.00

That's quite the 30% markup! What in the world am I doing wrong here?

For those that love fiddles, I've create a JSFiddle here: http://jsfiddle.net/p20roLLu/

moevans
  • 319
  • 2
  • 16

2 Answers2

1

This is because JavaScript is taking in pr.cost as a String. It sees (pr.cost*pr.markup) and automatically converts to an integer type, but pr.cost throws it off so it adds "50"+"15" and returns "5015". This can be solved by forcing JavaScript to interpret pr.cost as an integer, an easy way being to multiply or divide by one: 

{{(pr.cost*1)+(pr.cost*pr.markup)|currency}}

This is not a perfect or clean solution, but it will at least work.

GoogleBen
  • 28
  • 4
  • So what would be a "perfect or "clean" solution? This app needs to have the cleanest code possible? – moevans Jun 06 '15 at 17:12
  • @moevans A cleaner solution would use other libraries like jQuery to update the boxes. If you don't need to use the number in the sale price box, this solution will work just fine. If this is used only within itself (no other code references the math inside this part of the app) there is no reason not to use this. And, to be honest, if you _are_ using the calculation here outside this page, it should be programmed differently. Good luck! – GoogleBen Jun 06 '15 at 17:17
  • Why can't I add a `ng-model` to this field? If I do then the calculations do not work. how am I supposed to save this in my database? – moevans Jun 06 '15 at 17:47
  • @moevans ideally you'd do this calculation in your controller and bind the final sale field to that. Not really feasible with the code you provided. Also note that you should not save the final cost as is from the client. The server should take the cost and markup and do the calculation again on the server. Never trust the client. – Andy Gaskell Jun 06 '15 at 23:54
  • 1
    Personally I would prefer to see `{{Number(pr.cost)*(1+Number(pr.markup))|currency}}`. – Roamer-1888 Jun 07 '15 at 06:11
0

It looks like that the problem is the +. At the moment the you are getting:

50 + (50*.3) = 50+15 -> 5015 -> $5,015

As you can 

value="{{pr.cost*1+(pr.cost*pr.markup)|currency}}"

For a clenear versione you should use parseInt():

How can I parse String to Int in an Angular expression?

Community
  • 1
  • 1
Gregory Wullimann
  • 528
  • 5
  • 22