Spunky Posted February 5, 2015 Share Posted February 5, 2015 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). Link to comment Share on other sites More sharing options...
dsonesuk Posted February 5, 2015 Share Posted February 5, 2015 Values are treated as text string you need to convert to int or float parseInt(), parseFloat() depending on what you want. Link to comment Share on other sites More sharing options...
Ingolme Posted February 5, 2015 Share Posted February 5, 2015 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 5, 2015 Share Posted February 5, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
Spunky Posted February 8, 2015 Author Share Posted February 8, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now