购物车弹出框加减

最新推荐文章于 2023-05-31 20:52:24 发布

Ason_haiyu

最新推荐文章于 2023-05-31 20:52:24 发布

阅读量771

点赞数

本文链接：https://blog.csdn.net/Ason_haiyu/article/details/79050685

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 600px;
			}
			table tr:nth-child(odd){
				background:lightsteelblue;
			}
			table button{
				background: blue;
			}
		</style>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script>
			var app=angular.module("myapp",[]);
			app.controller("modec",function($scope){
				$scope.px='-number';
				$scope.sj=true;
				$scope.stus=[{
					ck:false,
					name:'香梨',
					price:12.00,
					number:2,
			
				},{
					ck:false,
					name:'苹果',
					price:15.00,
					number:1,
		
				},{
					ck:false,
					name:'香蕉',
					price:15.00,
					number:1,

				}];
				//添加
				$scope.add=function(){
					$scope.stus.push({
					ck:false,
					name:'甜橙',
					price:11.00,
					number:1,
	
						
					})
				}
				//清空购物车
				$scope.delall=function(){
					for (var i=0;i<$scope.stus.length;i++) {
						if($scope.stus[i].ck==true){
							$scope.stus.splice(i,1);
							i--;
						}
					}
				}
				//全选/全不选
				$scope.ckall=function(){
					for (var i=0;i<$scope.stus.length;i++) {
						$scope.stus[i].ck=$scope.flag;
					}
				}
				//点击按钮删除
				$scope.del=function(index){
					$scope.stus.splice(index,1)
				}
				//加减
				$scope.count=function(index,i){
					$scope.stus[i].number=$scope.stus[i].number+index;
					if($scope.stus[i].number==0){
						var f=confirm("您是否将该商品移除购物车？");
						if(f==true){
							$scope.stus.splice(i,1);
						}else if(f=false){
						}
						}else if($scope.stus.length == 0){
						   alter('你的购物车为空');  
					}
				}
				
				
				//计算总价
				$scope.smoney=function(){
					var smoney=0;
					for (var i=0;i<$scope.stus.length;i++) {
						smoney+=$scope.stus[i].price*$scope.stus[i].number;
					}
					return smoney;
				}
				
			})
		</script>
		
	</head> 
	<body ng-app="myapp" ng-controller="modec">
		
        <h2>我的购物车</h2><br />
      <!--  给input设置圆角边框style="border-radius: 10px;-->
      <input style="border-radius: 10px;" ng-model="rename" placeholder="输入关键字搜素" />
      <select ng-model="px">
      	<option value="-number">按数量正序排列</option>
      	<option value="+number">按数量倒序排列</option>
      </select>
      <button style="background: greenyellow; border-radius:6px; width: 60px;" ng-click="add()">入库</button>
      <br />
      <button style="background:red; color: #ffff;" ng-click="delall()">清空购物车</button>
      <table border="1" cellspacing="0">
      	<tr>
      		<td><input type="checkbox" ng-click="ckall()" ng-model="flag"></td>
      		<td>用户名</td>
      		<td>单价</td>
      		<td ng-click="px='number';sj=!sj">数量</td>
      		<td>小计</td>
      		<td>操作</td>
      	</tr>
      	<tr ng-repeat="s in stus|orderBy:px|filter:{name:rename}">
      		<td><input type="checkbox" ng-model="s.ck"/></td>
      		<td>{{s.name}}</td>
      		<td>{{s.name}}</td>
      		<td>{{s.price|currency:"￥"}}</td>
      		<td><button ng-click="count(+1,$index)">+</button> <input style="width: 30px;" ng-model="s.number" /><button ng-click="count(-1,$index)">－</button> </td>
			<td><button ng-click="del($index)">删除</button></td>
      	</tr>
      </table>
      总价为：{{smoney()|currency:"￥"}}
	</body> 
</html>