CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
FrenchyNYC
FrenchyNYC

Reputation: 337

How to change value based on options selected?

I am building a Ionic app and I am having trouble with the "cart" page of my app.

I try to display dynamically the price of the item when the options are selected :

<form id="itemOrder-form2" class="list">
      <label class="item item-input" id="itemOrder-input13">
        <span class="input-label">Quantity</span>
        <input type="number" placeholder="1">
      </label>
      <ion-checkbox id="itemOrder-checkbox1">With option 1 (+$2)</ion-checkbox>
      <ion-checkbox id="itemOrder-checkbox2">With option 2 (+$2)</ion-checkbox>
      <ion-checkbox id="itemOrder-checkbox3">With option 3 (+$2)</ion-checkbox>
      <label class="item item-input" id="itemOrder-input4">
        <input type="text" placeholder="Add some notes...">
      </label>
      <div class="spacer" style="width: 300px; height: 33px;"></div>
      <a ui-sref="menu2.menu" id="itemOrder-button3" class="button button-dark  button-block">Add to cart ($15)</a>
    </form>

How can I update the total price in my button Add to cart ($15) based on the options the user ticks and the quantity he chooses ?

Upvotes: 0

Views: 54

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Use ng-model with the checkboxes and use the model in the add to cart section,

 <ion-checkbox ng-model="price" id="itemOrder-checkbox1">With option 1 (+$2)</ion-checkbox>

and then

  <a ui-sref="menu2.menu" id="itemOrder-button3" class="button button-dark  button-block">Add to cart {{price}}</a>

Upvotes: 1

Related Questions