周考三
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<h2>我的购物车</h2>
<div ng-hide="isShow">您的购物车为空，去逛过商城。</div>
<div ng-show="isShow">
<input type="button" name="" id="" value="清空购物车" ng-click="clearGoods()" />
<table border="1" cellspacing="0" cellpadding="0">
<thead><tr>
<th><input type="checkbox" name="" id="" value="" ng-model="checkAll"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in goods">
<td><input type="checkbox" name="" id="" value="" ng-model="checkAll"/></td>
<td>{{x.name}}</td>
<td>{{x.price|currency:"￥："}}</td>
<td>
<input type="button" id="" value="-" ng-click="reduceNum(x.name)"/>
<input type="text" name="" id="" value="{{x.number}}" />
<input type="button" id="" value="+" ng-click="x.number=x.number+1"/>
<!--<input type="button" id="" value="+" ng-click="increaseNum(x.name)"/>-->
</td>
<td>{{(x.price*x.number)|currency:"￥："}}</td>
<td><input type="button" name="" id="" value="删除" ng-click="delGoods(x.name)" /></td>
</tr>
</tbody>
</table>
<div>总价为：{{getTotalPrice()|currency:"￥："}}</div>
</div>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.isShow=true;
//初使化为不选中
$scope.checkAll=false;
/*$http({
method:"GET",
url:"datas.json"
// url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest"
}).then(
function success(response){//请求成功
$scope.goods=response.data;
},function error(response){//请求失败
}
);*/
$scope.goods=[
{"id":10001,"name":"茉莉花茶","price":45.9,"number":2},
{"id":10032,"name":"南京雨花茶","price":75.8,"number":1},
{"id":10319,"name":"安吉白茶","price":105.0,"number":2},
{"id":10033,"name":"一级龙井茶","price":456.9,"number":5}];
//清空购物车
$scope.clearGoods=function(){
$scope.goods=[];
$scope.isShow=false;
}
var clickNum=0;
//数量减少
$scope.reduceNum=function(gname){
clickNum++;
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods[i].number--;
if($scope.goods[i].number<1){
var c=confirm("确定要删除该商品吗？");
if(c){
$scope.goods.splice(i,1);
}else{
$scope.goods[i].number=$scope.goods[i].number+clickNum;
clickNum=0;//恢复初使值
}
}
break;
}
}
}
//数量增加
$scope.increaseNum=function(gname){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods[i].number++;
break;
}
}
}
//删除商品
$scope.delGoods=function(gname){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods.splice(i,1);
break;
}
}
//当没有商品时
if($scope.goods.length==0){
$scope.isShow=false;
}
}
//得到商品总价格
$scope.getTotalPrice=function(){
var totalPrice=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalPrice+=$scope.goods[i].price*$scope.goods[i].number;
}
return totalPrice;
}
});
</script>
</body>
</html>