AJS: ng-repeat

[Spunky]

<div id="cost_total">Your total:<span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span></div>        <p>Size:</p>        <div class="radio" ng-repeat="x in pizza_sizes">        	<label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="{{x.value}}">{{x.tag}}</label>        </div>

Above is the code that is not working. What it is suppose to do is get the price of the "pizza" as the user selects the radio buttons to select the size (and checkboxes for the "toppings" but those are not important here), and show it in the span after "Total".

 

Here is the array that the ng-repeat is using:

$scope.pizza_sizes = [{tag:"Small for $3.95",value:3.95},{tag:"Medium for $5.95",value:5.95},{tag:"Large for $7.95",value:7.95}];

The code works when I manually code the 3 inputs with their values, it is when I started using the ng-repeat that the "total" doesn't change when a radio button is selected. However, when I "inspect" the code, it shows each input as it is suppose to with the correct values.

 

Is there a way I can do this using ng-repeat? Perhaps I am missing something? Thanks.

[justsomeguy]

Will Angular automatically add click events to the radio buttons to update the total or are you supposed to do that yourself?

[Spunky]

Will Angular automatically add click events to the radio buttons to update the total or are you supposed to do that yourself?

 

I'm not sure I follow what you mean. For the record, the ng-click that I put in the radio button is for something totally separate.

 

Right now what Angular is doing for me is automatically taking the value of the radio button when I click it and placing it where I specified to in the span. The code works when I have 3 radio buttons with their own specified value as such:

<div>    <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="3.95">3.95</label>    <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="5.95">5.95</label>    <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="7.95">7.95</label></div>

If that makes more sense?

[justsomeguy]

Is the total element updating immediately when a button was clicked? Does the page refresh when that happens?

[Spunky]

Is the total element updating immediately when a button was clicked? Does the page refresh when that happens?

 

It updates immediately when the radio and/or checkbox is clicked. So essentially, as the user clicks on the radio buttons and checkboxes, the "total" updates, either increasing or decreasing as they are checked or unchecked.

[justsomeguy]

So then there's got to be a Javascript function running to do that, is that something you wrote or did Angular do it automatically? I'm just not familiar enough with Angular to know that.

[Spunky]

<div id="cost_total">Your total:<span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span></div>     <p>Size:</p>     <div class="radio">          <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="3.95">$3.95</label>          <label><input type="radio" ng-model="size" ng-click="enable_toppings()"  name="size" value="5.95">$5.95</label>          <label><input type="radio" ng-model="size" ng-click="enable_toppings()"  name="size" value="7.95">$7.95</label></div>

<div id="toppings_wrap">            <p>Toppings (25 cents each):</p>            <div class="checkbox-inline">                <label><input type="checkbox" ng-model="sausage" ng-true-value=".25" ng-false-value="0">Sausage</label>            </div>            <div class="checkbox-inline">                <label><input type="checkbox" ng-model="pepperoni" ng-true-value=".25" ng-false-value="0">Pepperoni</label>            </div>            <div class="checkbox-inline">                <label><input type="checkbox" ng-model="greenPepper" ng-true-value=".25" ng-false-value="0">Green Pepper</label>            </div>            <div class="checkbox-inline">                <label><input type="checkbox" ng-model="onion" ng-true-value=".25" ng-false-value="0">Onion</label>            </div>            <button type="button" class="btn btn-md" id="next_pizza">Next Pizza <span class="glyphicon glyphicon-arrow-right"></span></button>        </div>

$scope.enable_toppings = function(){     document.getElementById("toppings_wrap").style.display = "block";};

That's the code.

<span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span>

That, from the HTML code, is all the Angular that is needed to pull the values from the radio and checkboxes. No other JavaScript. This works. However, I want to use the ng-repeat directive to place in each input item both from the radio buttons and the checkboxes. I started out doing the radio buttons.

 

That turns this:

<div class="radio">          <label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="3.95">$3.95</label>          <label><input type="radio" ng-model="size" ng-click="enable_toppings()"  name="size" value="5.95">$5.95</label>          <label><input type="radio" ng-model="size" ng-click="enable_toppings()"  name="size" value="7.95">$7.95</label></div>

into this:

<div class="radio" ng-repeat="x in pizza_sizes">        	<label><input type="radio" ng-model="size" ng-click="enable_toppings()" name="size" value="{{x.value}}">{{x.tag}}</label>        </div>

I also had to add the array:

$scope.pizza_sizes = [{tag:"Small for $3.95",value:3.95},{tag:"Medium for $5.95",value:5.95},{tag:"Large for $7.95",value:7.95}];

It displays the same. However, even though if I inspect the element on the page it shows the values are correct, they aren't being rendered correctly, it only picks up the first one (3.95).

 

 

So to answer your question, yes, this code:

<span id="cust_total" ng-model="total">{{(size*1 || 0) + (sausage*1 || 0) + (pepperoni*1 || 0) + (greenPepper*1 || 0) + (onion*1 || 0) | currency}}</span>

Does it automatically. It grabs the value from radio buttons that are named "size" and inputting the value and proceeding to calculate the values on the rest of the line of code.

Edited March 29, 2015 by Spunky

[justsomeguy]

they aren't being rendered correctly, it only picks up the first one (3.95).

Does that mean that only the first radio button has something in the value attribute?