Обновление диапазона внутреннего html динамически при изменении поля выбора в angularjs

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-repeat путем преобразования ng-model в item.itemUnitsSelected .the ng-change директива используется не должны иметь {{}} интерполяции в нем

<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 практика.

Вы также могли бы избавиться от события нг-изменения, вам просто нужно исправить поверочного тег, переименовывать items в item в тег диапазона.

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