第一种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<link rel="stylesheet" href="css/mycss.css" />
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div id="Box">
<h1>我的购物车</h1>
<div id="dataDiv" ng-show="isdataShow">
<button id="deleteAll" ng-click="deleteall()">清空购物车</button>
<table id="dataTable" ng-show="istableShow" border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td><input type="checkbox" ng-click="checkedall()"/></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>totalprice</td>
<td>option</td>
</tr>
</thead>
<tbody ng-repeat="x in datas">
<tr>
<td><input type="checkbox"/></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td><button ng-click="reduce(x.id)">-</button><input type="text" value="{{x.gnumber}}"/><button ng-click="increase(x.id)">+</button></td>
<td>{{x.totalprice=x.price*x.gnumber}}</td>
<td><button ng-click="deleteone(x.id)" class="deleteOne">删除</button></td>
</tr>
</tbody>
</table>
<span id="countPrice">总价为: ¥ {{count()}}</span>
</div>
<div ng-show="ismessageShow"><p>您的购物车为空,<p style="color: #1E90FF;">去逛商场</p></p></div>
</div>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.isdataShow=true;
$scope.istableShow=true;
$scope.ismessageShow=false;
$scope.datas=[
{id:10001,name:"茉莉花茶",price:45.9,gnumber:2},
{id:10032,name:"南京雨花茶",price:75.8,gnumber:1},
{id:10319,name:"安吉白茶",price:105.0,gnumber:2},
{id:10033,name:"一级龙井茶",price:456.9,gnumber:5}];
$scope.count=function(){
var countPrice=0;
for (var i = 0; i < $scope.datas.length; i++) {
countPrice+=$scope.datas[i].price*$scope.datas[i].gnumber;
}
return countPrice;
}
$scope.deleteall=function(){
$scope.datas=[];
$scope.isdataShow=false;
$scope.ismessageShow=true;
}
$scope.checkedall=function(){
var ischeckbox=$("input[type='checkbox']");
ischeckbox.each(function(){
$(this).prop("checked",true);
});
}
$scope.deleteone=function(Id){
for (var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id==Id)
{
$scope.datas.splice(i,1);
break;
}
}
}
//判断数量,用ID作为参数
$scope.reduce=function(Id){
//遍历所有数据
for (var i = 0; i < $scope.datas.length; i++) {
//当发现符合参数的数据时进入
if($scope.datas[i].id==Id)
{
//数量减一
$scope.datas[i].gnumber--;
//如果数量小于一时,弹窗提醒
if($scope.datas[i].gnumber<1)
{
var c = confirm("确定删除该商品吗?");
//确定删除
if(c)
{
//执行删除
$scope.datas.splice(i,1);
}else{
//否则还将数量重置为一
$scope.datas[i].gnumber=1;
}
}
break;
}
}
}
$scope.increase=function(Id){
for (var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id==Id)
{
$scope.datas[i].gnumber++;
break;
}
}
}
});
</script>
</body>
</html>
CSS文件
#Box{width: 1000px;height: 500px;margin: auto;}
#deleteAll{
float: right;
border-radius: 5px;
background-color: dodgerblue;
border: 0px;}
#dataTable{width: 1000px;}
.deleteOne{
width: 100%;
background-color: #2B93FF;
border-radius: 5px;
border: 0px;}
第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" charset="utf-8"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div id="box">
<h1 id="myh1">我的购物车详情</h1>
<input type="text" id="select" ng-model="qname" value="请输入内容" onblur="javascript:if(this.value=='')this.value='请输入内容';" onfocus="javascript:if(this.value=='请输入内容')this.value='';">
<table id="tab" border="1" cellpadding="0" cellspacing="0">
<thead style="background-color: #2b93ff;color:white">
<tr>
<td>选择商品<button id="checkedall" ng-click="checkedAll()">全选</button><button id="uncheckedall" ng-click="uncheckedAll()">反选</button></td>
<td ng-click="orderByIdUp()" id="Gid">商品编号▲</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td ng-click="orderByPriceUp()" id="Gprice">价格小计▲</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in datas|filter:{gname:qname}|orderBy:ob">
<td><input type="checkbox" class="checkbox"/></td>
<td>{{x.gid}}</td>
<td>{{x.gname}}</td>
<td><input type="number" ng-model="x.gnum" ng-click="minNum(x.gnum)"/></td>
<td>{{x.gprice}}</td>
<td>{{x.gcount=x.gnum*x.gprice}}</td>
<td><button ng-click="delete(x.gid)">删除</button></td>
</tr>
</tbody>
</table>
<div id="footer">
<div id="countNum"><span>商品总数: {{countNum()}}</span></div>
<div id="countPrice"><span>商品总价: {{countPrice()}}</span></div>
<button id="deletecheck" ng-click="deleteCheck()">清除所选</button>
<button id="deleteall" ng-click="deleteAll()">清空购物车</button>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.ob="";
var isClick=true;
var flag="商品编号▲";
var flag1="价格小计▲";
$scope.datas=[
{gid:001,gname:"手机",gnum:1,gprice:1000,gcount:1000},
{gid:002,gname:"手机",gnum:2,gprice:2000,gcount:4000},
{gid:003,gname:"手机",gnum:3,gprice:3000,gcount:9000}];
//全选
$scope.checkedAll=function(){
//获取所有的checkbox
var ischecked=$("input[type='checkbox']");
//遍历每一个checkbox
ischecked.each(function(){
//改变每一个checkbox的选中状态
$(this).prop("checked",true);
});
}
//反选
$scope.uncheckedAll=function(){
//获取所有的checkbox
var ischeckbox=$("input[type='checkbox']");
//获取所有选中的checkbox
var ischecked=$("input:checked");
//遍历每一个checkbox
ischeckbox.each(function(){
//改变每一个checkbox的选中状态
if(ischecked)
{$(this).prop("checked",false);}
else
{$(this).prop("checked",true);}
});
}
//清空购物车
$scope.deleteAll=function(){
$scope.datas=[];
}
//获得总数
$scope.countNum=function(){
var countnum=0;
for (var i = 0; i < $scope.datas.length; i++) {
countnum += $scope.datas[i].gnum;
}
return countnum;
}
//获得总价
$scope.countPrice=function(){
var countprice=0;
for (var i = 0; i < $scope.datas.length; i++) {
countprice += $scope.datas[i].gnum*$scope.datas[i].gprice;
}
return countprice;
}
//删除一行
$scope.delete=function(id){
for (var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].gid==id)
{
$scope.datas.splice(i,1);
break;
}
}
}
//ID排序
$scope.orderByIdUp=function(){
if(isClick)
{
$scope.ob="gid"
isClick=false;
$("#Gid").html("商品编号▲");
}else{
$scope.ob="-gid"
isClick=true;
$("#Gid").html("商品编号▼");
}
}
//小计排序
$scope.orderByPriceUp=function(){
if(isClick)
{
$scope.ob="gcount"
isClick=false;
$("#Gprice").html("价格小计▲");
}else{
$scope.ob="-gcount"
isClick=true;
$("#Gprice").html("价格小计▼");
}
}
});
</script>
</body>
</html>
CSS文件
#box{width: 1000px;height: 500px;margin: auto;background-color: #ff8080;}
#myh1{text-align: center;}
#select{
width:100px;
height:18px;
font-size:11px;
text-align:center;
border:#ccc 1px solid;
border-radius: 15px;
position: relative;
left: 680px;
/*b9f08b*/
}
#tab{margin:0 auto;margin-top: 40px;}
#tab td{width: 100px;text-align: center;}
#footer{width: 600px;margin: auto;background-color: skyblue;}
#footer div{background-color: #2b93ff;color: white;width: 100px;}
#deleteall{
background-color: #2b93ff;
color: white;
border: 0;
border-radius: 15px;
}
#countNum{float: left;}
#countPrice{margin: auto;}
#deleteall{float: right;}