anglular-动态购物车-watch-index
来源：互联网 发布：www.baidu.com淘宝 编辑：程序博客网 时间：2024/05/18 01:36
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../4月24日/js/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrop/bootstrap.min.css"/>
<script src="js/bootstrop/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-controller="myci">
<div class="container-fluid">
<div class="row col-md-6 col-md-offset-3" >
<table class="table table-bordered">
<tr>
<th>#</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>小计金额</th>
<th ng-click="dle()">删除</th>
</tr>
<tr ng-repeat="good in goodses">
<td>{{$index+1}}</td>
<td>{{good.goodsName}}</td>
<td>{{good.goodsPrice}}</td>
<td><input type="text" ng-model="good.count"/></td>
<td>{{good.goodsPrice*good.count}}</td>
<td ng-click="dle($index)">删除</td>
</tr>
</table>
<div>
<p>购买金额小于100元运费为10元<br/>购买金额小于300元运费为20元<br/>购买金额大于300元运费为0元</p>
<p>合计金额为：<span>{{a1}}</span></p>
<p>运费:<span>{{a2}}</span></p>
<p>应付款：{{a3}}</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myci",["$scope",function($scope){
$scope.goodses=[
{goodsID:1,goodsName:"寒冰",goodsPrice:14,count:1,subtotal:14},
{goodsID:2,goodsName:"龙龟",goodsPrice:12,count:1,subtotal:12},
{goodsID:3,goodsName:"德玛",goodsPrice:9,count:1,subtotal:9},
{goodsID:4,goodsName:"剑圣",goodsPrice:40,count:1,subtotal:40},
{goodsID:5,goodsName:"螳螂",goodsPrice:19,count:1,subtotal:19}
]
$scope.$watch("goodses",function(){
$scope.a1=0;
$scope.a2=0;
$scope.a3=0;
for (var i=0;i<$scope.goodses.length;i++) {
$scope.goodses[i].subtotal=$scope.goodses[i].goodsPrice*$scope.goodses[i].count;
$scope.a1+=$scope.goodses[i].subtotal;
if ($scope.a1<100) {
$scope.a2=10;
} else if($scope.a1<300){
$scope.a2=20;
}else{
$scope.a2=0;
}
}
$scope.a3=$scope.a1+$scope.a2;
},true)
$scope.dle=function(d){
$scope.goodses.splice(d,1)
}
}]);
</script>
</html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../4月24日/js/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrop/bootstrap.min.css"/>
<script src="js/bootstrop/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-controller="myci">
<div class="container-fluid">
<div class="row col-md-6 col-md-offset-3" >
<table class="table table-bordered">
<tr>
<th>#</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>小计金额</th>
<th ng-click="dle()">删除</th>
</tr>
<tr ng-repeat="good in goodses">
<td>{{$index+1}}</td>
<td>{{good.goodsName}}</td>
<td>{{good.goodsPrice}}</td>
<td><input type="text" ng-model="good.count"/></td>
<td>{{good.goodsPrice*good.count}}</td>
<td ng-click="dle($index)">删除</td>
</tr>
</table>
<div>
<p>购买金额小于100元运费为10元<br/>购买金额小于300元运费为20元<br/>购买金额大于300元运费为0元</p>
<p>合计金额为：<span>{{a1}}</span></p>
<p>运费:<span>{{a2}}</span></p>
<p>应付款：{{a3}}</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myci",["$scope",function($scope){
$scope.goodses=[
{goodsID:1,goodsName:"寒冰",goodsPrice:14,count:1,subtotal:14},
{goodsID:2,goodsName:"龙龟",goodsPrice:12,count:1,subtotal:12},
{goodsID:3,goodsName:"德玛",goodsPrice:9,count:1,subtotal:9},
{goodsID:4,goodsName:"剑圣",goodsPrice:40,count:1,subtotal:40},
{goodsID:5,goodsName:"螳螂",goodsPrice:19,count:1,subtotal:19}
]
$scope.$watch("goodses",function(){
$scope.a1=0;
$scope.a2=0;
$scope.a3=0;
for (var i=0;i<$scope.goodses.length;i++) {
$scope.goodses[i].subtotal=$scope.goodses[i].goodsPrice*$scope.goodses[i].count;
$scope.a1+=$scope.goodses[i].subtotal;
if ($scope.a1<100) {
$scope.a2=10;
} else if($scope.a1<300){
$scope.a2=20;
}else{
$scope.a2=0;
}
}
$scope.a3=$scope.a1+$scope.a2;
},true)
$scope.dle=function(d){
$scope.goodses.splice(d,1)
}
}]);
</script>
</html>
0 0
- anglular-动态购物车-watch-index
- 购物车index
- computed属性和watch属性的区别之三【购物车之watch】
- 第六讲:index$watch.html
- computed属性和watch属性的区别之四【购物车之computed】
- 蘑菇街购物车动态添加
- 实现购物车动态效果代码
- jQuery实现动态购物车效果
- anglular 自定义指令scope =
- 动态计算购物车总价（数量可选），nextSibling属性
- Android中使用动画动态添加商品进购物车
- java自定义动态数组-控制台购书系统-购物车实现
- watch
- watch
- $watch
- watch
- watch
- watch
- 线性结构中的插入删除基本运算
- Android 身份证号有效性校验工具类
- nginx.conf配置文件解析(http、server、location)
- ZOJ 2760 How Many Shortest Path（最短路径计数）
- TCP/UDP
- anglular-动态购物车-watch-index
- JavaScript---正则表达式问题
- 顺序访问和随机访问
- 项目记录-处理两个相交圆方法探索1
- java【多态】
- 拦截器 过滤器 监听器
- {题解}[jzoj5051]【GDOI2017模拟一试4.11】平行宇宙
- 网页爬虫工具BeautifulSoup使用总结
- IntelliJ/Android Studio中项目引用ImageLoader资源库的方法
