第一种
<!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;}