购物车可增加减少数量可添加

来源：互联网发布：淘宝买家大尺度晒图编辑：程序博客网时间：2024/04/30 15:13

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<style>
*{
margin: 0 auto;
padding: 0;
}
.div2{
width: 600px;
margin-top: 30px;
}
.div{
margin-top: 50px;
width: 600px;
height: 50px;
}

</style>
</head>
<body ng-app="myapp" ng-controller="mycr">

<div class="div">
<input type="button" value="新增订单" ng-click="xian()"/>    
<input type="button" value="批量删除" ng-click="pshan()"/>

</div>

<table border="1px" cellspacing="1" cellpadding="0" align="center" width="600px">
<tr>
<th><input type="checkbox" ng-model="qx" ng-click="qx1()"/></th>
<th>产品编号</th>
<th>产品名称</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
<tr align="center" ng-repeat="x in good">
<td><input type="checkbox" ng-model="x.check"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)"/>
{{x.count}}
<input type="button" value="+" ng-click="jia($index)"/>
</td>
<td>{{x.price}}</td>
<td>{{x.price*x.count}}</td>
<td><input type="button" value="移除" ng-click="shan($index)"/></td>
</tr>
</table>
<div class="div2">



总价:<span ng-bind="mysum()"></span>
       
数量:<span ng-bind="myshu()"></span>
       
<input type="button" value="清空购物车" ng-click="qing()"/>

</div>

<fieldset style="width: 600px;margin-top: 50px;" ng-show="xianyin">

<legend>添加商品</legend>
<center>
商品编号:<input type="text" ng-model="mid" /><br><br>
商品名称:<input type="text" ng-model="mname" /><br><br>
购买数量:<input type="number" ng-model="mcount" /><br><br>
商品单价:<input type="number" ng-model="mprice" /><br><br>
<input type="button" value="添加" ng-click="add()"/>
</center>
</fieldset>

</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.good=[
{"check":false,
"id":1000,
"name":"iPhone8",
"count":1,
"price":8888
},
{"check":false,
"id":1001,
"name":"iPhone9",
"count":2,
"price":9999
},
{"check":false,
"id":1002,
"name":"三星2017",
"count":1,
"price":14000
},
{"check":false,
"id":1003,
"name":"三星2018",
"count":1,
"price":20000
}
];

//总计的方法
$scope.mysum=function(){
var sum=0;
for (var i=0;i<$scope.good.length;i++) {
$scope.sum+=$scope.good[i].price*$scope.good[i].count;
}
return sum;
}

//总数的方法
$scope.myshu=function(){
var shu=0;
for (var i=0;i<$scope.good.length;i++) {
$scope.shu+=$scope.good[i].count;
}
return shu;
}

//清空购物车
$scope.qing=function(){
var del=confirm("确认要清空购物车吗")
if(del){
$scope.good=[];
$scope.sum=0;
$scope.shu=0;
}
}

//删除
$scope.shan=function($index){
var del=confirm("确认要删除吗")
if(del){
$scope.good.splice($index,1);
}
}

//点击+号数量添加
$scope.jia=function($index){
$scope.good[$index].count++;
}

//点击-号减少
$scope.jian=function($index){
if($scope.good[$index].count>1){
$scope.good[$index].count--;
}else{
var del=confirm("确认要删除吗")

if(del){
$scope.good.splice($index,1);
}

}

}

//全选的代码
$scope.qx1=function(){
if($scope.qx){
for (var i=0;i<$scope.good.length;i++) {
$scope.good[i].check=true;
}
}else{
for (var i=0;i<$scope.good.length;i++) {
$scope.good[i].check=false;
}
}

}

//批量删除的方法
$scope.pshan=function(){
for (var i=$scope.good.length-1;i>=0;i--) {
if($scope.good[i].check){
$scope.good.splice(i,1);
}
}
//删除完毕后全选为false
$scope.qx=false;
}

//点击新增菜单时显示
$scope.xian=function(){
$scope.xianyin=true;
}

//点击添加的方法
$scope.add=function(){

var shu=/^\d+$/;
var mcount=$scope.mcount;
var mprice=$scope.mprice;

var goods={
"check":false,
"id":$scope.mid,
"name":$scope.mname,
"count":$scope.mcount,
"price":$scope.mprice,

}

$scope.good.push(goods);
//点击添加后隐藏
$scope.xianyin=false;

//清空
$scope.mid="";
$scope.mname="";
$scope.mcount="";
$scope.mprice="";
}

})

</script>
</html>

阅读全文

0 0