购物车加减

最新推荐文章于 2023-09-23 09:52:14 发布

wangqingsongde

最新推荐文章于 2023-09-23 09:52:14 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/wangqingsongde/article/details/79092485

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script>
			var app = angular.module("Lj",[]);
			app.controller("count",function($scope){
				$scope.px = '-number';
				
				$scope.stus = [{name:'手机',price:1200,number:5},
								{name:'电脑',price:6200,number:4},
								{name:'平板',price:8200,number:2},
								{name:'苹果',price:5200,number:1}
				];
				$scope.update = function(n,names){
					var i=0;
					for(var j=0; j<$scope.stus.length; j++){
						if($scope.stus[j].name == names){
							var i=j;
						}
					}
					if($scope.stus[i].number == 1  &&  n==-1){
						if(confirm("是否删除"+$scope.stus[i].name)){
							$scope.stus.splice(i,1);
						}
					}else {
						$scope.stus[i].number = $scope.stus[i].number+n;
					}
				}
				$scope.sum = function(){
					var sums = 0;
					for(var i in $scope.stus){
						sums = sums + $scope.stus[i].price*$scope.stus[i].number;
					}
					return sums;
				}
				$scope.ckAll = function(){
					for(var i=0; i<$scope.stus.length; i++){
						$scope.stus[i].ck = $scope.cks;
					}
				}
				$scope.tabshow = true;
				$scope.tabshows = false;
				$scope.dele = function(){
					var deles = 0;
					for(var i=0; i<$scope.stus.length; i++){
						if($scope.stus[i].ck){
							deles++;
							$scope.stus.splice(i,1);
							i--;
						}
					}
					if(deles == 0){
						alert("请选择");
					}
					if($scope.stus.length==0){
						$scope.tabshow = false;
						$scope.tabshows = true;
						alert("购物车已清空")
					}
				}
				$scope.add = function(){
					$scope.stus.push({name:'充电宝',price:200,number:6});
				}
				$scope.deletes = function($index){
					if($index>=0){
						if(confirm("是否删除"+$scope.stus[$index].name)){
							$scope.stus.splice($index,1);
						}
					}
				}
			});
		</script>
		
		<style>
			.box{
				width: 800px;
				height: 400px;
				background: pink;
				margin: 0 auto;
			}
			select{
				width: 120px;
				height: 25px;
				margin-left: 400px;
			}
			#butadd{
				background: greenyellow;
				margin-left: 50px;
			}
			#butdele{
				background: red;
				color: white;
				float: right;
			}
			table{
				margin-top: 60px;
				width: 800px;
				text-align: center;
			}
			tr:nth-child(odd){
				background: yellow;
			}
			tr:nth-child(even){
				background: greenyellow;
			}
		</style>
	</head>
	<body ng-app="Lj" ng-controller="count">
		<div class="box">
			<h2 >我的购物车</h2>
			<h1 ng-show="tabshows">购物车为空，请继续选择</h1>
			<input type="text" placeholder="输入关键字搜索" ng-show="tabshow" ng-model="selename"/>
			<select ng-show="tabshow" ng-model="px">
				<option value="-number">数量倒序</option>
				<option value="+number">数量正序</option>
				<option value="-price">价格倒序</option>
				<option value="+price">价格正序</option>
			</select>
			<input type="button" value="入库" id="butadd" ng-show="tabshow" ng-click="add()"/>
			<p><input type="button" value="删除选中商品" id="butdele" ng-click="dele()" ng-show="tabshow"/></p>
			<table border="1" cellpadding="0" cellspacing="0" ng-show="tabshow">
				<tr>
					<td><input type="checkbox" ng-click="ckAll()" ng-model="cks"/></td>
					<td>name</td>
					<td>price</td>
					<td>number</td>
					<td>totalprice</td>
					<td>option</td>
				</tr>
				<tr ng-repeat="s in stus|filter:{name:selename}|orderBy:px">
					<td><input type="checkbox" ng-model="s.ck"/></td>
					<td>{{s.name}}</td>
					<td>{{s.price|currency:"￥"}}</td>
					<td>
						<button ng-click="update(+1,s.name)">+</button>
						<input style="width: 30px;" ng-model="s.number"/>
						<button ng-click="update(-1,s.name)">-</button>
					</td>
					<td>{{s.price*s.number|currency:"￥"}}</td>
					<td><input type="button" value="删除" ng-click="deletes($index)" style="background: plum;"/></td>
				</tr>
			</table>
			<p ng-show="tabshow">总价为:{{sum()|currency:"￥"}}</p>
		</div>
	</body>
</html>

wangqingsongde

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
购物车加减

html> head> meta charset="UTF-8"> title>title> script type="text/javascript" src="js/angular.min.js" >script> script> var app = angular.module("Lj",[]); app.controller("count",function(
复制链接

扫一扫