网站购物车

最新推荐文章于 2024-10-28 16:32:04 发布

原创最新推荐文章于 2024-10-28 16:32:04 发布 · 396 阅读

本内容遵循CC 4.0 BY-SA版权协议

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
angular.module("wuyu", []).controller("domec", function($scope) {
$scope.stus = [{
ck: false,
name: 'qq',
price: 12.90,
number: 2,
},
{
ck: false,
name: 'wx',
price: 23.90,
number: 1,
},
{
ck: false,
name: 'xx',
price: 99.90,
number: 1,
}
]

$scope.aa=function(a){
if(confirm("您是否将商品移除购物车？")){
$scope.stus.splice(a,1);
}
}
$scope.zong=function(){
var count=0;
for(var i=0;i<$scope.stus.length;i++){
count=count+$scope.stus[i].number*$scope.stus[i].price;
}
return count;
}

$scope.del=function(b){
$scope.stus.splice(b,$scope.stus.length);
$scope.tab=true;
alert("购物车为空！");
}

$scope.add=function(){
var s={
ck: false,
name: 'yy',
price: 199.90,
number: 1
};
$scope.stus.push(s);
}

$scope.update=function(d,number){
$scope.stus[d].number=$scope.stus[d].number+number;
if($scope.stus[d].number==0){
$scope.datas.splice(d,1);
}
}

})
</script>
<style type="text/css">
table tr td{
width: 120px;
}
</style>
</head>

<body ng-app="wuyu" ng-controller="domec">
<h3>我的购物车</h3>
<h1 ng-show="tab">购物车已空，请继续购物</h1>
<div ng-hide="tab" style="width: 640px;">
<div style="width: 640px;margin-bottom: 30px;">
<input placeholder="输入关键字查询" ng-model="sname"/>

<button ng-click="add()" style="background-color: #99FF00;float: right;">入库</button>
<select ng-model="sstate" style="float: right;margin-right: 20px;">
<option value="">排序</option>-
<option value="+number">按正序排列</option>
<option value="-number">按倒序排列</option>
</select>
</div>
<div style="width: 640px;">
<button style="background-color: red;float: right;" ng-click="del($index)" >清空购物车</button>
</div><br /><br />
<div style="width: 640px;">

<table border="1px">
<tr>
<td><input type="checkbox" ng-model="ckis"/></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>totalPrice</td>
<td>option</td>
</tr>

<tr ng-repeat="g in stus|orderBy:sstate|filter:{name:sname}">
<td><input type="checkbox" ng-model="g.ck"/></td>
<td>{{g.name}}</td>
<td>{{g.price|currency:'￥'}}</td>
<td>
<button style="background-color: blue;" ng-click="update($index,1)">+</button>
{{g.number}}
<button style="background-color: blue;" ng-click="update($index,1)">-</button>
</td>
<td>{{g.price*g.number|currency:'￥'}}</td>
<td><button ng-click="aa($index)" style="background-color: blue;">删除</button></td>
</tr>

<tr>
<td colspan="6">总价为：{{zong()|currency:'￥'}}</td>
</tr>
</table>
</div>
</div>
</body>

</html>

网站 购物车

网站购物车