周模拟
<!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">
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>