我的购物车详情老师写的

最新推荐文章于 2023-05-06 20:35:55 发布

heheyihehe

最新推荐文章于 2023-05-06 20:35:55 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/heheyihehe/article/details/79740532

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css">
	thead{
	background: gray;
	}
	tbody tr:nth-child(even){
	background-color: deeppink;
	}
	tbody tr:nth-child(odd){
	background-color: green;
	}
	</style>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
	<div>
	<h2>我的购物车详情</h2>
	<p><input type="text" name="" id="" value="" placeholder="根据名称查询" ng-model="searchKey"/></p>
	<table border="1" cellspacing="0" cellpadding="0" width="60%">
	<thead>
	<tr>
	<th ng-click="orderbyId()">商品编号</th>
	<th>商品名称</th>
	<th>商品数量</th>
	<th>商品单价</th>
	<th ng-click="orderbyCount()">价格小计</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat=" x in goods\|filter:{name:searchKey}\|orderBy:orderKey">
	<td>{{x.id}}</td>
	<td>{{x.name}}</td>
	<td>
	<input type="button" id="" value="-" ng-model="" ng-click="reduceNums($index)" />
	<input type="text" id="" ng-model="x.nums" />
	<input type="button" id="" value="+" ng-model="" ng-click="increaseNums($index)" />
	</td>
	<td>{{x.price}}</td>
	<td>{{x.nums*x.price}}</td>
	<td><input type="button" id="" value="移除" ng-click="removeGoods(x.name)" /></td>
	</tr>
	</tbody>
	</table>
	<div>
	<span>商品总数是：{{getTotalNum()}}</span>
	<span>商品总价是：{{getTotalPrice()}}</span>
	<input type="button" id="" value="清空购物车" ng-click="clearGoods()" />
	</div>
	</div>

	<script type="text/javascript">
	var app=angular.module("myapp",[]);
	app.controller("myctrl",function($scope){
	//初使化
	$scope.num=0;
	//排序关键字
	$scope.orderKey="";

	$scope.goods=[
	{id:"001",name:"手机",price:1000,nums:1},
	{id:"002",name:"电脑",price:2000,nums:1},
	{id:"004",name:"电视",price:500,nums:1},
	{id:"003",name:"鼠标",price:90,nums:1}];

	$scope.orderbyId=function(){
	$scope.orderKey="id";
	}

	$scope.removeGoods=function(gname){
	for (var i = 0; i <$scope.goods.length; i++) {
	if($scope.goods[i].name==gname){
	$scope.goods.splice(i,1);
	break;
	}
	}
	}

	$scope.clearGoods=function(){
	//清空所有购物车数据
	$scope.goods=[];
	}
	//计算总数量
	$scope.getTotalNum=function(){
	var totalNum=0;
	for (var i = 0; i < $scope.goods.length; i++) {
	totalNum+=$scope.goods[i].nums;
	}
	return totalNum;
	}
	//计算总价格
	$scope.getTotalPrice=function(){
	var totalPrice=0;
	for (var i = 0; i < $scope.goods.length; i++) {
	totalPrice+=($scope.goods[i].price*$scope.goods[i].nums)
	}
	return totalPrice;
	}
	//数量减少
	$scope.reduceNums=function(index){
	// alert(index);
	$scope.goods[index].nums--;
	if($scope.goods[index].nums<1){
	var c=confirm("确定要删除该产品吗？");
	if(c){
	$scope.goods.splice(index,1);
	}
	}

	}
	//数量增加
	$scope.increaseNums=function(index){
	$scope.goods[index].nums++;
	}

	});
	</script>

	</body>
	</html>

heheyihehe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
我的购物车详情老师写的

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery-3.2.1.min.js" type="text/javascript" chars
复制链接

扫一扫