购物车增强版

最新推荐文章于 2021-10-20 15:25:48 发布

wangqingsongde

最新推荐文章于 2021-10-20 15:25:48 发布

阅读量129

点赞数

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

版权

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>隔行换色+删除+批量删除+排序+模糊查询+修改+添加</title>
	<script type="text/javascript" src="../angular/angular.js" ></script>
	<style>
	button:hover
	{
	background-color: #FF3B30;
	}
	tbody tr:nth-child(odd){
	background-color: orange;
	}

	tbody tr:nth-child(even){
	background-color: aqua;
	}
	ul li{
	list-style: none;
	}
	</style>
	<script type="text/javascript">

	var app=angular.module("myApp",[]);
	app.controller("myCtrl",function($scope){
	/声明数据对象，初始化商品信息，数据自拟且不低于四条/
	$scope.goods = [{
	"id": 80,
	"name": "iPhone",
	"price": 5400,
	state: false
	}, {
	"id": 1200,
	"name": "ipad mini",
	"price": 2200,
	state: false
	}, {
	"id": 500,
	"name": "ipad air",
	"price": 2340,
	state: false
	}, {
	"id": 290,
	"name": "ipad",
	"price": 1420,
	state: false
	}, {
	"id": 910,
	"name": "imac",
	"price": 15400,
	state: false
	}];
	//按照年龄进行过滤
	$scope.search="";
	//点击删除按钮，删除当前商品
	$scope.delGoods=function(delName){
	if (window.confirm("确定要删除吗?"))
	{
	for (index in $scope.goods)
	{
	if (delName==$scope.goods[index].name)
	{
	$scope.goods.splice(index,1);
	} else{
	alert("删除成功哟！");
	}
	}
	} else
	{
	alert("你已取消删除！");
	alert("请重新选择删除的项目！");
	}
	}
	//点击列明进行排序
	$scope.orderFlag="";
	$scope.orderLine="id";
	$scope.orderDesc=function(line){
	$scope.orderLine=line;
	if ($scope.orderFlag=="")
	{
	$scope.orderFlag="-";
	}else
	{
	$scope.orderFlag="";
	}
	}
	//下拉菜单删选商品价格、
	$scope.goodsPrice="--请选择--";
	$scope.isShow=function(price){
	if ($scope.goodsPrice=="--请选择--")
	{
	return true;
	}
	else{
	var arr=$scope.goodsPrice.split("-");
	var priceMin=arr[0];
	var priceMax=arr[1];
	if (price<priceMin \|\| price>priceMax)
	{
	return false;
	}
	else{
	return true;
	}
	}
	}

	//全选反选
	$scope.selectAll=false;
	$scope.selectAllFun=function(){
	if ($scope.selectAll)
	{
	for (index in $scope.goods)
	{
	$scope.goods[index].state=true;
	}
	} else
	{
	for (index in $scope.goods)
	{
	$scope.goods[index].state=false;
	}
	}
	}

	//全不选
	$scope.checkSelectAll=function(){
	var a=0;
	for (index in $scope.goods)
	{
	if (!$scope.goods[index].state)
	{
	$scope.selectAll=false;
	} else
	{
	a++;
	}
	if (a==$scope.goods.length)
	{
	$scope.selectAll=true;
	} else
	{
	$scope.selectAll=false;
	}
	}
	}
	//批量删除
	$scope.delSelect=function(){
	//定义一个空数组
	var arr=[];
	for (index in $scope.goods)
	{
	if ($scope.goods[index].state)
	{
	arr.push($scope.goods[index].name);
	}
	}
	if (arr.length<=0)
	{
	alert("请重新选择删除的项目！");
	} else
	{
	if (window.confirm("确定要删除吗?"))
	{
	for (index in arr)
	{
	for (index2 in $scope.goods)
	{
	if (arr[index]==$scope.goods[index2].name)
	{
	$scope.goods.splice(index2,1);
	}
	}
	}
	}
	else
	{
	alert("你已取消删除！");
	alert("请重新选择删除的项目！");
	}
	}
	}

	//新增商品
	$scope.formShow=false;
	$scope.add=function(){
	if ($scope.formShow)
	{
	$scope.formShow=false;
	} else{
	$scope.formShow=true;
	$scope.updateShow=false;
	}
	}

	//提交新加商品进行验证
	$scope.newId="";
	$scope.newName="";
	$scope.newPrice="";
	$scope.checkSub=[];
	$scope.divShow=false;
	$scope.sub=function(){
	$scope.checkSub=[];
	if ($scope.newId=="" \|\| $scope.newId==null)
	{
	$scope.checkSub.push("产品编号为空");
	} else if(isNaN($scope.newId))
	{
	$scope.checkSub.push("产品编号不是整数");
	}
	if ($scope.newName=="" \|\| $scope.newName==null)
	{
	$scope.checkSub.push("产品名称为空");
	}
	if ($scope.newPrice=="" \|\| $scope.newPrice==null)
	{
	$scope.checkSub.push("产品价格为空");
	} else if(isNaN($scope.newPrice))
	{
	$scope.checkSub.push("产品产品价格为空不是整数");
	}

	if (window.confirm("确定要添加吗？请你再核实一遍！"))
	{
	if ($scope.checkSub.length>0)
	{
	$scope.divShow=true;
	} else
	{
	$scope.divShow=false;
	var newSp={
	"id":parseInt($scope.newId),
	"name":$scope.newName,
	"price":parseInt($scope.newPrice),
	state:false
	};
	$scope.goods.push(newSp);
	$scope.formShow=false;
	}
	alert("你已经添加成功了哟！");
	}

	}

	//修改页面
	$scope.updateShow=false;
	$scope.updateId="";
	$scope.updateName="";
	$scope.updatePrice="";
	$scope.updateShowFun=function(sp)
	{
	if (window.confirm("你确定要修改吗？请在考虑一下！"))
	{
	$scope.updateShow=true;
	$scope.formShow=false;
	$scope.updateId=sp.id;
	$scope.updateName=sp.name;
	$scope.updatePrice=sp.price;
	}
	else{
	alert("你已经取消了修改哟！");
	}
	}
	$scope.updateSub=function(){
	$scope.updateArr=[];
	if ($scope.updateName=="" \|\| $scope.updateName==null)
	{
	$scope.updateArr.push("产品名称为空");
	}
	if ($scope.updatePrice=="" \|\| $scope.updatePrice==null)
	{
	$scope.updateArr.push("产品价格为空");
	}
	else if(isNaN($scope.updatePrice))
	{
	$scope.updateArr.push("产品价格不是整数");
	}

	//验证不满足
	if ($scope.updateArr.length>0)
	{
	$scope.yz=true;
	} else
	{
	$scope.yz=false;
	for (index in $scope.goods)
	{
	if (parseInt($scope.updateId)==$scope.goods[index].id)
	{
	$scope.goods[index].name=$scope.updateName;
	$scope.goods[index].price=$scope.updatePrice;
	$scope.updateShow=false;
	} else{
	alert("验证成功！");
	}
	}
	}
	}
	});
	</script>
	</head>


	<body ng-app="myApp" ng-controller="myCtrl">
	<center>
	<h3>购物车</h3>
	<input type="text" size="10" placeholder="产品名称" ng-model="search" /> 产品价格
	<select ng-model="goodsPrice">
	<option>--请选择--</option>
	<option>0-2000</option>
	<option>2001-3000</option>
	<option>3001-4000</option>
	<option>4001-5000</option>
	<option>5001-6000</option>
	<option>6001-7000</option>
	<option>7001-8000</option>
	<option>8001-无穷大</option>
	</select>
	<select ng-model="selOrder">
	<option value="">排序方式</option>
	<option value="id">id正序</option>
	<option value="-id">id逆序</option>
	<option value="price">价格正序</option>
	<option value="-price">价格逆序</option>
	</select>
	<button ng-click="delSelect()" style="cursor:pointer;">批量删除</button>
	<br /><br />

	<table border="1px solid blue" cellspacing="0" cellpadding="12" >
	<thead>
	<tr>
	<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
	<th ng-click="orderDesc('id')">产品编号</th>
	<th ng-click="orderDesc('name')">产品名称</th>
	<th ng-click="orderDesc('price')">产品价格</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="sp in goods \| filter:{'name':search} \| orderBy:selOrder \| orderBy:(orderFlag+orderLine)" ng-show="isShow(sp.price)">
	<td><input type="checkbox" ng-model="sp.state" ng-click="checkSelectAll()" /></td>
	<td>{{sp.id}}</td>
	<td>{{sp.name}}</td>
	<td>{{sp.price \| currency:"￥："}}</td>
	<td>
	<button ng-click="delGoods(sp.name)" style="cursor:pointer;">删除</button>
	<button ng-click="updateShowFun(sp)" style="cursor:pointer;">修改</button>
	</td>
	</tr>
	</tbody>
	</table><br />
	<button ng-click="add()">添加新产品</button><br/><br/>
	<form style="border: 1px solid blue; width: 300px;" ng-show="formShow">
	<h3>添加商品</h3> 商品编号：
	<input type="text" placeholder="商品编号" ng-model="newId" /><br /><br /> 商品名称：
	<input type="text" placeholder="商品名称" ng-model="newName" /><br /><br /> 商品价格：
	<input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br />
	<div style="border: 1px solid blue; width: 250px; background-color:pink;" ng-show="divShow">
	<ul>
	<li ng-repeat="chenk in checkSub">{{chenk}}</li>
	</ul>
	</div><br />
	<input type="button" value="提交" ng-click="sub()" />
	</form>
	<!-- 修改 -->
	<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
	<h3>修改商品</h3> 商品编号：
	<input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称：
	<input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品价格：
	<input type="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
	<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">
	<ul>
	<li ng-repeat="chenk in updateArr">{{chenk}}</li>
	</ul>
	</div><br />
	<input type="button" value="提交" ng-click="updateSub()" />
	</form>
	</center>
	</body>
	</html>

wangqingsongde

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车增强版

charset="UTF-8"> 隔行换色+删除+批量删除+排序+模糊查询+修改+添加 type="text/javascript" src="../angular/angular.js" > button:hover { background-color: #FF3B30;
复制链接

扫一扫