在angularjs中的选择框更改动态更新内部html

Question

我有一个页面上的多个选择框与每个选择框有一个范围列出其价格。在选择框中根据项目动态更改价格更新。我如何使用angularjs来实现这一点？

下面

<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); 
}; 

Answer 1

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>