html购物车练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 60%;
				background-color: orchid;
				margin: 0 auto;
				text-align: center;
				padding: 20px;
			}
			#cha{
				float: right;
				border-radius: 10px;
				margin: 5px;
			}
			table{
				width: 100%;
				
			}
			button{
				background-color: gold;
			}
			thead tr{
				background-color: dimgray;
			}
			tbody tr:nth-child(even){
				background-color: chartreuse;
			}
			tbody tr:nth-child(odd){
				background-color: cyan;
			}
			.but{
				border: none;
				background-color:dimgray;
			}
			
			.lift{
				float: left;
				margin: 10px;
			}
			.cent{
				margin-bottom: 10px;
			}
			#right{
				float: right;
				margin: 10px;
				border-radius: 5px;
				background-color: gold;
			}
			#del{
				background-color: gold;
			}
		</style>
		
		
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
		<div>b
		<h1>我的购物车详情</h1>
		<input type="text" name="" id="cha" value="" placeholder="根据名称查询" ng-model="searchKey"/>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>商品编号<input type="button" class="but" value="{{flag}}" ng-click="orderbyId()"/></th>
					<th>商品名称</th>
					<th>商品数量</th>
					<th>商品单价<input type="button" class="but" value="{{flag1}}" ng-click="orderbyPrice()"/></th>
					<th>价格小计</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="x in goods|filter:{gname:searchKey}|orderBy:orderKey">
					<td>{{x.gid}}</td>
					<td>{{x.gname}}</td>
					<td>{{x.gnum}}</td>
					<td>{{x.gprice}}</td>
					<td>{{x.gcount=x.gnum*x.gprice}}</td>
					<td><input type="button" name="" id="del" value="删除" ng-click="deldata(x.gname)"/></td>
				</tr>
			</tbody>
		</table>
		<span class="lift">商品总数：{{getGoodsNum()}}</span>
		<span class="cent">商品总价：{{getGoodsPrice()}}</span>
		<input type="button" name="" id="right" value="清空购物车"  ng-click="delGoods()"/>
		</div>
		<script type="text/javascript">
			var app=angular.module("myapp",[]);
			app.controller("myctrl",function($scope){
				
				//初始化排序字段
				$scope.orderKey="";
				//设置一个变量
				var isChang=true;
				//初始化
				$scope.flag="▲";
				$scope.flag1="▲";
				
				//添加集合数据
				$scope.goods=[
				{gid:"001",gname:"手机",gprice:1200,gnum:2,gcount:2400},
				{gid:"003",gname:"电脑",gprice:3800,gnum:1,gcount:3800},
				{gid:"002",gname:"数码相机",gprice:2400,gnum:3,gcount:7200}]
				//获取商品总数
				$scope.getGoodsNum=function(){
					var goodsNum=0;
					for (var i = 0; i < $scope.goods.length; i++) {
						goodsNum+=$scope.goods[i].gnum;
					}
					return goodsNum;
				}
				//获取商品总价
				$scope.getGoodsPrice=function(){
					var goodsPrice=0;
					for (var i = 0; i < $scope.goods.length; i++) {
						goodsPrice+=$scope.goods[i].gnum*$scope.goods[i].gprice;
					}
					return goodsPrice;
				}
				//按id排序
				$scope.orderbyId=function(){
					if (isChang) {
						$scope.orderKey="gid"; //升序
						isChang=false;
						$scope.flag="▲";
					} else{
						$scope.orderKey="-gid";//降序
						isChang=true;
						$scope.flag="▼";
					}
				}
				//按价格排序
				$scope.orderbyPrice=function(){
					if(isChang){
						$scope.orderKey="gprice";
						isChang=false;
						$scope.flag1="▲";
					}else{
						$scope.orderKey="-gprice";//降序
						isChang=true;
						$scope.flag1="▼";
					}
				}
				//清空购物车
				$scope.delGoods=function(){
					$scope.goods=[];
				}
				//删除单行数据
				$scope.deldata=function(obj){
					for (var i = 0; i < $scope.goods.length; i++) {
						if($scope.goods[i].gname==obj){
							$scope.goods.splice(i,1);
							break;
						}
					}
				}
				
			});
			
		</script>
		
		
	</body>
</html>
猜你喜欢
