购物车清空

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>月考</title>
<script type="text/javascript" src="js/angular.js" ></script>
<style>
tbody tr:nth-child(odd){background-color: aqua;}
tbody tr:nth-child(even){background-color: deeppink ;}
</style>
<script>
/*创建连接angular的驱动*/
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.products = [{
gid:001,
gname:"手机",
gnum:3,
gprice:1000,
gcount:3000
},{
gid:002,
gname:"电脑",
gnum:3,
gprice:2000,
gcount:6000
},{
gid:003,
gname:"电视",
gnum:6,
gprice:500,
gcount:3000
}]

//清空购物车
$scope.delall=function(){
$scope.products.splice(0,$scope.products.length);
}
//单个移除商品
$scope.yc=function(i){
$scope.products.splice(i,1);
}
//总金额
$scope.sum=function(){
count=0;
for(var i in $scope.products){
count=count+$scope.products[i].gnum*$scope.products[i].gprice;
}
return count;
}

//总数量
$scope.snum=function(){
count=0;
for(var i in $scope.products){
count=count+$scope.products[i].gnum;
}
return count;
}

//商品数量的加减
$scope.count=function (num,sname) {
for(var i = 0;i<$scope.products.length;i++){
if($scope.products[i].gname==sname){
if($scope.products[i].gnum==1 && num==-1){
var f = confirm("是否确认删除这个商品?");
/*9. 当商品数量减少到小于1的时候，提示“确定要删除该产品吗？”，
* 点击确定，删除该行数据。
* */
if(f){
$scope.products.splice(i,1)
}
}else{
$scope.products[i].gnum = $scope.products[i].gnum+num;
}
}
}
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<h1>我的购物车详情</h1>

<p id="p1"><input placeholder="根据名称查询" style="background-color: yellow;border-radius: 10px;margin-left: 200px;" ng-model="cx" /></p>
<thead>
<tr style="background-color:darkgrey;" ng-model="paiz">
<th ng-click="px='gprice';gid=!gid">商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th>价格小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in products | filter:{gname:cx} | orderBy:px:gid">
<td>{{pro.gid}}</td>
<td>{{pro.gname}}</td>
<td>
<button ng-click="count(+1,pro.gname)"> + </button>
<input style="width: 35px;" ng-model="pro.gnum" />
<button ng-click="count(-1,pro.gname)"> - </button>
</td>
<td>{{pro.gprice}}</td>
<td>{{pro.gcount*gnum}}</td>
<td>
<button ng-click="yc($index)" style="background-color: yellow;">移除</button>
</td>
</tr>
</tbody>

</table>
<button style="background-color: aqua;">商品数量：{{snum()}}</button>

<button style="background-color: aqua; margin-left: 50px;">商品总价：{{sum()}}</button>
<button style="background-color: yellow; margin-left: 50px;" ng-click="delall()">清空购物车</button>

</body>
</html>

猜你喜欢