<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> | |
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> | |
<style type="text/css"> | |
thead{ | |
background: gray; | |
} | |
tbody tr:nth-child(even){ | |
background-color: deeppink; | |
} | |
tbody tr:nth-child(odd){ | |
background-color: green; | |
} | |
</style> | |
</head> | |
<body ng-app="myapp" ng-controller="myctrl"> | |
<div> | |
<h2>我的购物车详情</h2> | |
<p><input type="text" name="" id="" value="" placeholder="根据名称查询" ng-model="searchKey"/></p> | |
<table border="1" cellspacing="0" cellpadding="0" width="60%"> | |
<thead> | |
<tr> | |
<th ng-click="orderbyId()">商品编号</th> | |
<th>商品名称</th> | |
<th>商品数量</th> | |
<th>商品单价</th> | |
<th ng-click="orderbyCount()">价格小计</th> | |
<th>操作</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat=" x in goods|filter:{name:searchKey}|orderBy:orderKey"> | |
<td>{{x.id}}</td> | |
<td>{{x.name}}</td> | |
<td> | |
<input type="button" id="" value="-" ng-model="" ng-click="reduceNums($index)" /> | |
<input type="text" id="" ng-model="x.nums" /> | |
<input type="button" id="" value="+" ng-model="" ng-click="increaseNums($index)" /> | |
</td> | |
<td>{{x.price}}</td> | |
<td>{{x.nums*x.price}}</td> | |
<td><input type="button" id="" value="移除" ng-click="removeGoods(x.name)" /></td> | |
</tr> | |
</tbody> | |
</table> | |
<div> | |
<span>商品总数是:{{getTotalNum()}}</span> | |
<span>商品总价是:{{getTotalPrice()}}</span> | |
<input type="button" id="" value="清空购物车" ng-click="clearGoods()" /> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
var app=angular.module("myapp",[]); | |
app.controller("myctrl",function($scope){ | |
//初使化 | |
$scope.num=0; | |
//排序关键字 | |
$scope.orderKey=""; | |
$scope.goods=[ | |
{id:"001",name:"手机",price:1000,nums:1}, | |
{id:"002",name:"电脑",price:2000,nums:1}, | |
{id:"004",name:"电视",price:500,nums:1}, | |
{id:"003",name:"鼠标",price:90,nums:1}]; | |
$scope.orderbyId=function(){ | |
$scope.orderKey="id"; | |
} | |
$scope.removeGoods=function(gname){ | |
for (var i = 0; i <$scope.goods.length; i++) { | |
if($scope.goods[i].name==gname){ | |
$scope.goods.splice(i,1); | |
break; | |
} | |
} | |
} | |
$scope.clearGoods=function(){ | |
//清空所有购物车数据 | |
$scope.goods=[]; | |
} | |
//计算总数量 | |
$scope.getTotalNum=function(){ | |
var totalNum=0; | |
for (var i = 0; i < $scope.goods.length; i++) { | |
totalNum+=$scope.goods[i].nums; | |
} | |
return totalNum; | |
} | |
//计算总价格 | |
$scope.getTotalPrice=function(){ | |
var totalPrice=0; | |
for (var i = 0; i < $scope.goods.length; i++) { | |
totalPrice+=($scope.goods[i].price*$scope.goods[i].nums) | |
} | |
return totalPrice; | |
} | |
//数量减少 | |
$scope.reduceNums=function(index){ | |
// alert(index); | |
$scope.goods[index].nums--; | |
if($scope.goods[index].nums<1){ | |
var c=confirm("确定要删除该产品吗?"); | |
if(c){ | |
$scope.goods.splice(index,1); | |
} | |
} | |
} | |
//数量增加 | |
$scope.increaseNums=function(index){ | |
$scope.goods[index].nums++; | |
} | |
}); | |
</script> | |
</body> | |
</html> | |
我的购物车详情老师写的
最新推荐文章于 2019-04-11 11:19:13 发布