购物车案列

最新推荐文章于 2025-02-04 22:30:33 发布

转载最新推荐文章于 2025-02-04 22:30:33 发布 · 249 阅读

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物</title>
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="../angularjs/angular.js" ></script>
<script type="text/javascript" src="../angularjs/angular-route.js" ></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//声明数据对象，初始化商品信息
$scope.shopList=[
{ name:'阿玛尼',price:'1500.80',num:1},
{ name:'雅诗兰黛',price:'6000.40',num:1},
{ name:'iPhone X',price:'12000.90',num:1},
{ name:'劳力士',price:'80000.10',num:1},
{ name:'雪茄',price:'2300.30',num:1}
];
//点击减少
$scope.reduce= function (index) {
if($scope.shopList[index].num>1){
$scope.shopList[index].num--;
}else{
$scope.remove(index);
}
};
//点击增加
$scope.add=function(index){
$scope.shopList[index].num++;
};
//计算总价
$scope.allSum=function(){
var allPrice = 0;
for(var i= 0;i<$scope.shopList.length;i++){
allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;
}
return allPrice;
};
//计算总数量
$scope.allNum=function(){
var allShu=0;
for(var i=0;i<$scope.shopList.length;i++){
allShu+=$scope.shopList[i].num;
}
return allShu;
};
//移除一项
$scope.remove=function(index){
if(confirm('您是否将商品移除购物车？')){
$scope.shopList.splice(index,1);
}
};
//使得输入框中不得小于等于0
$scope.change=function(index){
if($scope.shopList[index].num>=1){
}else{
$scope.shopList[index].num=1;
}
};
//清空购物车
$scope.removeAll=function(){
if(confirm('确定清空购物车')){
$scope.shopList=[];
}
}

});

</script>
</head>
<body ng-app="myApp">
<div class="container">
<h1>我的购物车</h1>
<div ng-controller="myCtrl">
<button class="btn btn-warning "ng-click="removeAll()" style="background-color:#D9534F; color: white; margin-left:10px;">清空购物车</button>
<table class="list-group" border="1 soled green">
<tr class="list-group-item">
<td><input type="checkbox" ng-model="select_all"/></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>totalPrice</td>
<td>option</td>
</tr>

<tr ng-repeat="shop in shopList" class="list-group-item">
<td><input ng-model="select_all" type="checkbox" /></td>
<td>{{shop.name}}</td>
<td>{{shop.price|currency : '￥'}}</td>
<td>
<button ng-click="reduce($index)" style="background-color:#337AB7;">-</button>
<input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)" style="width: 30px;">
<button ng-click="add($index)" style="background-color:#337AB7;">+</button>
</td>
<td>{{shop.price*shop.num|currency : '￥'}}</td>
<td><button class="btn btn-primary btn-xs" ng-click="remove($index)" style="background-color:#337AB7;">删除</button></td>
</tr>

</table>
<a class="list-group-item" style="background: antiquewhite;">总价为:￥<a ng-bind="allSum()"></a></a>

</div>
</div>
</body>
</html>