//月考练习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> |
网页月考练习3
最新推荐文章于 2022-03-29 20:55:31 发布