js购物车

最新推荐文章于 2022-10-12 19:22:28 发布

yu_10_9

最新推荐文章于 2022-10-12 19:22:28 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yu_10_9/article/details/78327709

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车</title>
<link rel="stylesheet" href="js/bootstrap.min.css" />
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.1.0.js"></script>
<style>
span{padding-left:50px;padding-right:60px;}
  </style>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
  //声明数据对象，初始化商品信息
$scope.shopList=[
{ name:'单片机',price:'80.90',num:1},
{ name:'电烙铁',price:'20.40',num:1},
{ name:'万用表',price:'46.90',num:1},
{ name:'示波器',price:'21.10',num:1},
{ name:'电饭锅',price:'79.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:1000px;">清空购物车</button>
<ul class="list-group">
  <li class="list-group-item">
  <span><input type="checkbox" ng-model="select_all"/></span>
  <span>name</span>
  <span>price</span>
  <span>number</span>
  <span>totalPrice</span>
  <span>option</span>
  </li>

<li ng-repeat="shop in shopList" class="list-group-item">
<span><input ng-model="select_all" type="checkbox" /></span>
<span>{{shop.name}}</span>
<span>{{shop.price|currency : '￥'}}</span>
<span>
<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>
</span>
<span>{{shop.price*shop.num|currency : '￥'}}</span>
<button class="btn btn-primary btn-xs" ng-click="remove($index)" style="background-color:#337AB7;">删除</button>
</li>
  <li class="list-group-item">总价为：￥<span ng-bind="allSum()"></span></li>
</ul>

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