网页月考练习3

//月考练习3 综合 <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">
	tbody tr:nth-child(even){/偶数行/
	background: yellow;

	}
	tbody tr:nth-child(odd){/偶数行/
	background: red;

	}
	.main{
	width: 60%;
	margin: 0 auto;
	text-align: center;
	}

	#search{
	float: right;
	background: yellow;
	border-radius: 10px;
	margin-bottom: 20px;
	}
	#stotalnum{
	float:left;
	background: green;
	border: 2px solid black;
	margin-top:15px;
	padding-left: 5px;
	padding-right: 5px;
	}
	#stotalprice{
	float:left;
	background: green;
	border: 2px solid black;
	margin-top:15px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 20px;
	}
	#clear{
	float:left;
	background: yellow;
	border: 2px solid black;
	margin-top:15px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 20px;
	border-radius: 10px;
	}
	thead{
	background: gray;
	}
	.btn1{
	background: gray;
	border: 0;
	}
	</style>

	</head>
	<body ng-app="myapp" ng-controller="myctrl">
	<div class="main">
	<h2>我的购物车详情</h2>
	<input type="text" name="" id="search" value="" placeholder="根据名称查询" ng-model="searchKey"/>


	<table border="1" cellspacing="0" cellpadding="0" width="100%">
	<thead>
	<tr>
	<th>商品编号 <input type="button" class="btn1" id="" value="{{falg}}" ng-click="orderById()"/></th>
	<th>商品名称</th>
	<th>商品数量</th>
	<th>商品单价</th>
	<th>价格小计 <input type="button" class="btn1" id="" value="{{falg1}}" ng-click="orderByCount()"/></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><input type="number" name="" id="" value="{{x.gnum}}" ng-model="x.gnum" ng-click="reduce(x.gnum)" /></td>
	<td>{{x.gprice}}</td>
	<td>{{x.gcount=x.gnum*x.gprice}}</td>
	<td><input type="button" id="" value="删除" ng-click="delGoods(x.gname)" /></td>
	</tr>

	</tbody>
	</table>

	<div>
	<span id="stotalnum">商品总数:{{getTotalNum()}}</span>
	<span id="stotalprice">商品总价:{{getTotalPrice()}}</span>
	<input type="button" name="" id="clear" value="清空购物车" ng-click="clearGoods()" />
	</div>
	</div>
	<script type="text/javascript">
	var app=angular.module("myapp",[]);
	app.controller("myctrl",function($scope){

	//初使化排序字段
	$scope.orderKey="";
	//
	var isFirst=true;

	//初使化标志
	$scope.falg="▲";
	$scope.falg1="▲";


	$scope.goods=[
	{gid:"001",gname:"手机",gnum:2,gprice:500,gcount:1000},
	{gid:"003",gname:"电脑",gnum:1,gprice:1500,gcount:1500},
	{gid:"002",gname:"手机",gnum:3,gprice:300,gcount:900}];

	//得到总数量
	$scope.getTotalNum=function(){
	var total=0;
	for (var i = 0; i < $scope.goods.length; i++) {
	total=total+$scope.goods[i].gnum;
	}
	return total;
	}
	//得到商品总价格
	$scope.getTotalPrice=function(){
	var totalPrice=0;
	for (var i = 0; i < $scope.goods.length; i++) {
	totalPrice+=$scope.goods[i].gprice*$scope.goods[i].gnum;
	}
	return totalPrice;
	}

	//清空购物车
	$scope.clearGoods=function(){
	$scope.goods=[];
	}

	//删除数据
	$scope.delGoods=function(obj){
	for (var i = 0; i < $scope.goods.length; i++) {
	//查找名称
	if($scope.goods[i].gname==obj){
	$scope.goods.splice(i,1);//进行删除
	break;
	}
	}
	}

	//根据id排序
	$scope.orderById=function(){
	if(isFirst){
	$scope.orderKey="gid";//升序
	isFirst=false;
	$scope.falg="▲";
	}else{
	$scope.orderKey="-gid";//倒序
	isFirst=true;
	$scope.falg="▼";
	}

	}

	$scope.orderByCount=function(){
	if(isFirst){
	$scope.orderKey="gcount";
	isFirst=false;
	$scope.falg1="▲";
	}else{
	$scope.orderKey="-gcount";//倒序
	isFirst=true;
	$scope.falg1="▼";
	}
	}

	//当商品数量小于1时，判断是否进行删除
	$scope.reduce=function(num){
	if(num<1){
	var c=confirm("确定删除吗？")
	if(c){//为true时，代表删除
	for (var i = 0; i < $scope.goods.length; i++) {
	if($scope.goods[i].gnum==num){
	$scope.goods.splice(i,1);
	break;
	}
	}
	}
	}

	}


	})

	</script>


	</body>
	</html>

猜你喜欢