在angularjs中的選擇框更改動態更新內部html

我有一個頁面上的多個選擇框與每個選擇框有一個範圍列出其價格。在選擇框中根據項目動態更改價格更新。我如何使用angularjs來實現這一點？在angularjs中的選擇框更改動態更新內部html

下面

<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>

在我的控制器目前我通過JavaScript更新值我的代碼，我想改變，並使用angularjs綁定。

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

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

來源

2015-09-05 Salman Raza

您還可以添加一個用於選擇構造的json示例。 –

請在這裏找到json格式 https://gist.github.com/anonymous/89f3e2cd7d1bf24cc31f –

itemUnitsSelected應該通過轉換ng-model到item.itemUnitsSelected .The ng-change您使用的指令不應該有{{}}插值界於ng-repeat每個項目在它

<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>

不要做DOM操作來自控制器，其考慮爲BAD 的做法。

你也可以擺脫NG-改變事件的，你只需要糾正你的span標籤，在span標籤重命名items到item。

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

來源

2015-09-05 09:46:29

是的，我這樣做，但我怎麼改變價格的跨度取決於從選擇框中更改項目。 –

@SalmanRaza看看更新 –

謝謝，那作品 –

在angularjs中的選擇框更改動態更新內部html

回答

相關問題