Update span inner html dynamically on select box change in angularjs

Question

I have multiple select box on a page with each select box have a span listing its price. On select box change the price update dynamically based on the item. How I can achieve this using angularjs ?

My Code below

<div ng-repeat="items in itemsList" class="col-md-3 col-sm-3 ">

    <div class="product product-category">
        <div class="details">
            <img src="resources/images/itemImages/{{items.image}}" style="width:159;height:159;" class="image" />
            <h4 class="name">{{items.name}}<span class="quality">(Quality)</span></h4>
            <h4 class="info">{{items.description}}</h4>
            <select id="unit{{items.id}}" ng-init="itemUnitsSelected = items.itemUnitPrices[0]" ng-model="itemUnitsSelected" ng-change="changedValue(itemUnitsSelected, '{{items.id}}')" data-ng-options="XYZ as XYZ.unit.name for XYZ in items.itemUnitPrices track by XYZ.id " class="form-control item-count">
            </select>
        </div>
        <div class="cart-feature">
            <h5 class="price">
              <span class="rate original"></span>
              <span class="rate  discounted" price="{{items.itemUnitPrices[0].itemPrice}}" id="discountedAmount{{items.id}}">Rs. {{items.itemUnitPrices[0].itemPrice}}</span>
              </h5>
            <div class="cart-option">
                <span class="tag">Qty </span>
                <span class="quantity">
                  <input type="text" value="1" id="qty{{items.id}}" class="form-control" />
                </span>
                <a href="javascript:return;" class="event" ng-click="addItemToCart(items.id,items.name)">
                    <span class="cart-btn"></span>
                </a>
            </div>
        </div>
    </div>

</div>

On my controller currently I am updating value through javascript, I want to change and bind it using angularjs.

 $scope.changedValue=function(item,itemId){

    document.getElementById("discountedAmount"+itemId).innerHTML = "Rs. "+item.itemPrice;
    document.getElementById("discountedAmount"+itemId).setAttribute("price", item.itemPrice);
 };

Can you also add an example of your json used for select construction. — Diana R, Sep 05 '15 at 09:38
please find the json format here https://gist.github.com/anonymous/89f3e2cd7d1bf24cc31f — Salman Raza, Sep 05 '15 at 10:05

Pankaj Parkar · Accepted Answer · 2015-09-05T10:08:49.717

itemUnitsSelected should bounded to each item of ng-repeat by converting ng-model to item.itemUnitsSelected.The ng-change directive you are using shouldn't have {{}} interpolation in it

<select id="unit{{items.id}}" 
  ng-init="item.itemUnitsSelected = items.itemUnitPrices[0]" 
  ng-model="itemUnitsSelected" 
  ng-change="changedValue(itemUnitsSelected, item.id)"
  data-ng-options="XYZ as XYZ.unit.name for XYZ in items.itemUnitPrices track by XYZ.id " 
  class="form-control item-count">
</select>

Don't do DOM manipulation from controller, its consider as BAD practice.

You could also get rid of the ng-change event, you just need to correct your span tag, rename items to item in span tag.

<span class="rate  discounted" 
  price="{{item.itemUnitPrices[0].itemPrice}}" 
  id="discountedAmount{{item.id}}">
      Rs. {{item.itemUnitPrices[0].itemPrice}}
</span>

yes, i did that but how do I change the price in span depending on changing the item from select box. — Salman Raza, Sep 05 '15 at 10:06

Update span inner html dynamically on select box change in angularjs

1 Answers1