<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p{
font-size: 23px;
}
div span{
color: #337AB7;
}
button{
size: 40px;
background: #337AB7;
border: 0px;
border-radius: 3px;
color: #FFFFFF;
font-size: 15px;
}
#delbtn{
size: 40px;
padding: 8px;
font-size: 10px;
}
#delbtnred{
background: #D9534F;
size: 40px;
padding: 8px;
font-size: 10px;
}
</style>
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//数组,初始化
$scope.cartArr = [{
name:"qq",
price:12.90,
number:2,
state:false
},{
name:"wx",
price:23.90,
number:1,
state:false
},{
name:"wx",
price:99.90,
number:1,
state:false
}];
//默认一开始显示div
$scope.div1show = true;
$scope.div2show = false;
//全选按钮的初始化
$scope.checkAll = false;
var a = 0;
//正着全选
$scope.selectAll = function(){
//判断当前是选中还是取消选中
if($scope.checkAll==true){
//遍历数组,都选中
for(var i=0;i<$scope.cartArr.length;i++){
$scope.cartArr[i].state = true;
a++;
}
}else{
for(var i=0;i<$scope.cartArr.length;i++){
$scope.cartArr[i].state = false;
a--;
}
}
};
//反着全选,,传参 ,当前 index,下标
$scope.selectOne = function(index){
//如果当前选中了小按钮
if($scope.cartArr[index].state==true){
a++;
}else{
//如果当前没选中,a--
a--;
}
//判断a 是否等于数组长度
if(a==$scope.cartArr.length){
//全部选中了就 让大的全选按钮选中
$scope.checkAll = true;
}else{
$scope.checkAll = false;
}
}
//删除选中商品的点击事件
$scope.deleteSelected = function(){
//判断a的长度
if(a==0){
alert("请选择要删除的商品");
}else{
for(var i=0;i<$scope.cartArr.length;i++){
if($scope.cartArr[i].state==true){
//遍历过程中如果当前选中了,就删除掉
$scope.cartArr.splice(i,1);
//删除了当前的这一条 可能下标越界.所以i--
i--;
a--;
}
}
//删除完之后,全选按钮变成没有选中
$scope.checkAll = false;
if($scope.cartArr.length==0){
//如果数组没数据了,,就隐藏div
$scope.div1show = false;
$scope.div2show = true;
}
}
}
//每一行的删除的点击事件
$scope.deletehang = function(index){
$scope.cartArr.splice(index,1);
//a--;
if($scope.cartArr.length==0){
//如果数组没数据了,,就隐藏div
$scope.div1show = false;
$scope.div2show = true;
}
};
//加号按钮的点击事件
$scope.jia = function(index){
//点击加号,,对应当前行的number数量加1
$scope.cartArr[index].number++;
}
//减号按钮的点击事件
$scope.jian = function(index){
if($scope.cartArr[index].number==1){
//如果已经数量为1了 ,不能再减去,,询问是否删除
var queren = confirm("是否删除该商品?");
//alert(queren);
if(queren){
//当用户点击”确认”时删除该条商品信息
$scope.cartArr.splice(index,1);
//alert(a);
//a++;
if($scope.cartArr.length==0){
//如果数组没数据了,,就隐藏div
$scope.div1show = false;
$scope.div2show = true;
}
}
}else{
//点击减号,,对应的 数量减1
$scope.cartArr[index].number--;
}
}
//计算总价的方式
$scope.zongjia = function(){
var zongj = 0;//总价默认是0
angular.forEach($scope.cartArr,function(item,key){
zongj += item.number * item.price;
});
//将计算好的总价返回
return zongj;
}
$scope.zongsl = function(){
var zongshu = 0;
angular.forEach($scope.cartArr,function(item,key){
zongshu += item.number;
});
return zongshu;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p id="p">我的购物车</p>
<hr />
<div ng-show="div2show">您的购物车为空,<span>去逛商场</span></div>
<div ng-show="div1show" id="divbiao">
<br /><br />
<center>
<table width="70%" border="1" cellpadding="3" cellspacing="0">
<thead>
<tr>
<th colspan="6" align="right">
<button id="delbtnred" ng-click="deleteSelected()" >删除选中商品</button>
</th>
</tr>
</thead>
<thead>
<tr>
<th>
<input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>
</th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
<tbody align="center">
<tr ng-repeat="x in cartArr">
<td>
<input type="checkbox" ng-model="x.state" ng-click="selectOne($index)"/>
</td>
<td>{{x.name}}</td>
<td>{{x.price | currency:"¥"}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input style="width: 25px;text-align: center;" type="number" ng-model="x.number" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price*x.number | currency:"¥"}}</td>
<td>
<button ng-click="deletehang($index)" id="delbtn">删除</button>
</td>
</tr>
<tr align="left">
<td colspan="6">总价为 :
{{zongjia() | currency:"¥"}}
总数量为 :
{{zongsl()}}</td>
</tr>
</tbody>
</thead>
</table>
</center>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p{
font-size: 23px;
}
div span{
color: #337AB7;
}
button{
size: 40px;
background: #337AB7;
border: 0px;
border-radius: 3px;
color: #FFFFFF;
font-size: 15px;
}
#delbtn{
size: 40px;
padding: 8px;
font-size: 10px;
}
#delbtnred{
background: #D9534F;
size: 40px;
padding: 8px;
font-size: 10px;
}
</style>
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//数组,初始化
$scope.cartArr = [{
name:"qq",
price:12.90,
number:2,
state:false
},{
name:"wx",
price:23.90,
number:1,
state:false
},{
name:"wx",
price:99.90,
number:1,
state:false
}];
//默认一开始显示div
$scope.div1show = true;
$scope.div2show = false;
//全选按钮的初始化
$scope.checkAll = false;
var a = 0;
//正着全选
$scope.selectAll = function(){
//判断当前是选中还是取消选中
if($scope.checkAll==true){
//遍历数组,都选中
for(var i=0;i<$scope.cartArr.length;i++){
$scope.cartArr[i].state = true;
a++;
}
}else{
for(var i=0;i<$scope.cartArr.length;i++){
$scope.cartArr[i].state = false;
a--;
}
}
};
//反着全选,,传参 ,当前 index,下标
$scope.selectOne = function(index){
//如果当前选中了小按钮
if($scope.cartArr[index].state==true){
a++;
}else{
//如果当前没选中,a--
a--;
}
//判断a 是否等于数组长度
if(a==$scope.cartArr.length){
//全部选中了就 让大的全选按钮选中
$scope.checkAll = true;
}else{
$scope.checkAll = false;
}
}
//删除选中商品的点击事件
$scope.deleteSelected = function(){
//判断a的长度
if(a==0){
alert("请选择要删除的商品");
}else{
for(var i=0;i<$scope.cartArr.length;i++){
if($scope.cartArr[i].state==true){
//遍历过程中如果当前选中了,就删除掉
$scope.cartArr.splice(i,1);
//删除了当前的这一条 可能下标越界.所以i--
i--;
a--;
}
}
//删除完之后,全选按钮变成没有选中
$scope.checkAll = false;
if($scope.cartArr.length==0){
//如果数组没数据了,,就隐藏div
$scope.div1show = false;
$scope.div2show = true;
}
}
}
//每一行的删除的点击事件
$scope.deletehang = function(index){
$scope.cartArr.splice(index,1);
//a--;
if($scope.cartArr.length==0){
//如果数组没数据了,,就隐藏div
$scope.div1show = false;
$scope.div2show = true;
}
};
//加号按钮的点击事件
$scope.jia = function(index){
//点击加号,,对应当前行的number数量加1
$scope.cartArr[index].number++;
}
//减号按钮的点击事件
$scope.jian = function(index){
if($scope.cartArr[index].number==1){
//如果已经数量为1了 ,不能再减去,,询问是否删除
var queren = confirm("是否删除该商品?");
//alert(queren);
if(queren){
//当用户点击”确认”时删除该条商品信息
$scope.cartArr.splice(index,1);
//alert(a);
//a++;
if($scope.cartArr.length==0){
//如果数组没数据了,,就隐藏div
$scope.div1show = false;
$scope.div2show = true;
}
}
}else{
//点击减号,,对应的 数量减1
$scope.cartArr[index].number--;
}
}
//计算总价的方式
$scope.zongjia = function(){
var zongj = 0;//总价默认是0
angular.forEach($scope.cartArr,function(item,key){
zongj += item.number * item.price;
});
//将计算好的总价返回
return zongj;
}
$scope.zongsl = function(){
var zongshu = 0;
angular.forEach($scope.cartArr,function(item,key){
zongshu += item.number;
});
return zongshu;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p id="p">我的购物车</p>
<hr />
<div ng-show="div2show">您的购物车为空,<span>去逛商场</span></div>
<div ng-show="div1show" id="divbiao">
<br /><br />
<center>
<table width="70%" border="1" cellpadding="3" cellspacing="0">
<thead>
<tr>
<th colspan="6" align="right">
<button id="delbtnred" ng-click="deleteSelected()" >删除选中商品</button>
</th>
</tr>
</thead>
<thead>
<tr>
<th>
<input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>
</th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
<tbody align="center">
<tr ng-repeat="x in cartArr">
<td>
<input type="checkbox" ng-model="x.state" ng-click="selectOne($index)"/>
</td>
<td>{{x.name}}</td>
<td>{{x.price | currency:"¥"}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input style="width: 25px;text-align: center;" type="number" ng-model="x.number" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price*x.number | currency:"¥"}}</td>
<td>
<button ng-click="deletehang($index)" id="delbtn">删除</button>
</td>
</tr>
<tr align="left">
<td colspan="6">总价为 :
{{zongjia() | currency:"¥"}}
总数量为 :
{{zongsl()}}</td>
</tr>
</tbody>
</thead>
</table>
</center>
</div>
</body>
</html>