我的购物车详情另一种方式

最新推荐文章于 2019-01-08 06:17:07 发布

前无路后无路

最新推荐文章于 2019-01-08 06:17:07 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/wwe11122/article/details/79749318

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></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 calss="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="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:100,gcount:1000},
{gid:"002",gname:"手机",gnum:"2",gprice:100,gcount:1000},
{gid:"003",gname:"手机",gnum:"2",gprice:100,gcount:1000}];

$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=obg){
$scope.goods.splice(i,1);
break;

}
}
}

$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=false;
$scope.falg1="▼";
}
}
$scope.reduce=function(num){
if(num<1){
var c=confirm("确定删除吗?")
if(c){
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].gnum==num){
$scope.goods.splice(i,1);
break;
}
}
}
}
}
})
</script>
</body>
</html>

前无路后无路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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/angular.min.js" type="text/javascript"&gt;&a
复制链接

扫一扫