在angularjs中,当选择框发生变化时,动态更新span内部的html
Update span inner html dynamically on select box change in angularjs
我在一个页面上有多个选择框,每个选择框都有一个列出其价格的span。在选择框中,根据项目动态更改价格更新。我如何使用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);
};
itemUnitsSelected
应该通过将ng-model
转换为item.itemUnitsSelected
来限定ng-repeat
的每个项目。您正在使用的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操作,它被认为是坏的练习。
你也可以去掉ng-change事件,你只需要纠正你的span标签,在span标签中将items
重命名为item
。
<span class="rate discounted"
price="{{item.itemUnitPrices[0].itemPrice}}"
id="discountedAmount{{item.id}}">
Rs. {{item.itemUnitPrices[0].itemPrice}}
</span>
相关文章:
- 更新动态JSP内容
- 添加动态文本框时更新动态高度
- jquery赢得't更新动态生成的html
- 如何使用实时数据更新(动态)标记图标
- Ajax可以更新动态导航菜单吗
- 使用select选项更新动态生成的两个框的价格
- 如何在Javascript中异步更新动态生成的HTML控件
- JQuery没有't更新:动态添加元素的最后一个筛选器
- 如何在service-worker.js中更新动态url
- 在javascript中使用函数更新动态变量
- 如何在jquery中更新动态标签后重定向第二个html页面
- 更新动态生成器$set
- 使用knockout更新动态生成的按钮文本
- $compile不更新动态生成的HTML运行时
- PHP -更新动态HTML表中的一行
- 使用Jquery连续删除和更新动态创建的表行id
- 使用指定的x和y值更新动态Dojo图表
- Highchart:如何通过单击按钮更新动态图表
- 正在更新动态HTML文件
- 使用AJAX在Rails中更新动态图表