AngularJS - checkbox value

[Spunky]

http://plnkr.co/edit/yAf74IGjzullthF1F5oJ?p=preview

 

That code in Plunker works exactly how I want it to, it adds the 2 values (.25 + .25) together to make .5.

 

Can anyone tell me what the difference is between that code and this code?:

<div id="form" data-ng-app="pizzaOrdersApp" ng-controller="priceCtrl">   <div class="selectionBox">      <h2>-Select Size-</h2>      <div id="optionsAreaTop">         <label class="labelSize" for="Small"><input type="radio" ng-model="size" value="3.95" />Small $3.95</label>	 <label class="labelSize" for="Medium"><input type="radio" ng-model="size" value="5.95" />Medium $5.95</label>	 <label class="labelSize" for="Large"><input type="radio" ng-model="size" value="7.95" />Large $7.95</label>      </div>   </div>   <div class="selectionBox">      <h2>-Toppings-</h2>      <div id="optionsArea">         +$.25 each<br />         <label for="Cheese"><input type="checkbox" ng-model="cheese" ng-true-value=".25" ng-false-value="0" />Cheese</label>	 <label for="Sausage"><input type="checkbox" ng-model="sausage" ng-true-value=".25" ng-false-value="0" />Sausage</label>	 <label for="Pepperoni"><input type="checkbox" ng-model="pepperoni" ng-true-value=".25" ng-false-value="0" />Pepperoni</label>	 <label for="GreenPepper"><input type="checkbox" ng-model="greenPepper" ng-true-value=".25" ng-false-value="0" />Green Peppers</label>	 <label for="Onion"><input type="checkbox" ng-model="onions" ng-true-value=".25" ng-false-value="0" />Onions</label>      </div>   </div>   <div id="redFiller"></div>   <div id="display">      <h3>Your Pizza:</h3>      <div id="topArea">         <div id="currentOrder">            <div id="orders">               <span id="defaultText">Your Order</span>            </div>            <hr />                	            <div id="price">               {{size + cheese + sausage}}  	            </div>

Clicking each radio/checkbox makes the values appear but they are not added together, instead they appear one after another (3.95.25.25).

[dsonesuk]

Values are treated as text string you need to convert to int or float parseInt(), parseFloat() depending on what you want.

[Ingolme]

Perhaps using + as both the addition operator and concatenation operator was a bad design choice.

 

AngularJS doesn't allow functions inside expressions, but I did a bit of research and you can use a multiplication to cast the values to a number

<div id="price">{{size*1 + cheese*1 + sausage*1}}     </div>

I tried this, but I found that if the checkboxes weren't selected their values were being interpreted as NaN, so I added a small expression to make sure that if it wasn't a number it would evaluate to zero.

 

Here's the end result which appears to work for all cases. I added the "currency" filter so that the number would always have two decimal digits.

<div id="price">{{(size*1 || 0) + (cheese*1 || 0) + (sausage*1 || 0) | currency}}</div>

[dsonesuk]

You have to initialize default value for radio buttons and checkboxes to be calculated, setup a controller function to calculate values using parseFloat() for example

<div id="form"  ng-controller="priceCtrl" ng-app="" ng-init="size= 0; cheese = 0; sausage=0;">

                        <div id="price">                            {{CalcValue()}}                        </div>

            function priceCtrl($scope)            {                $scope.CalcValue = function() {                    return parseFloat($scope.cheese) + parseFloat($scope.size) + parseFloat($scope.sausage);                };            }

Edited February 5, 2015 by dsonesuk

[Spunky]

 

Perhaps using + as both the addition operator and concatenation operator was a bad design choice.

 

AngularJS doesn't allow functions inside expressions, but I did a bit of research and you can use a multiplication to cast the values to a number

<div id="price">{{size*1 + cheese*1 + sausage*1}}     </div>

I tried this, but I found that if the checkboxes weren't selected their values were being interpreted as NaN, so I added a small expression to make sure that if it wasn't a number it would evaluate to zero.

 

Here's the end result which appears to work for all cases. I added the "currency" filter so that the number would always have two decimal digits.

<div id="price">{{(size*1 || 0) + (cheese*1 || 0) + (sausage*1 || 0) | currency}}</div>

Thank you, this works, yes perhaps it was a bad choice. Javascript has always used + for both addition as well as concatenation depending on it is a number or a string, I can't imagine why it isn't registering the values as numbers. Also thank you for the filter tip.