Test02

最新推荐文章于 2021-05-19 12:22:27 发布

whatfuck_

最新推荐文章于 2021-05-19 12:22:27 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/whatfuck_/article/details/79780909

<!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"/>

</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,$http,$location){

$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>