<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>周考三</title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<style>
table {
text-align: center;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3 style="margin-left: -450px;">我的购物车</h3>
<hr color="blanchedalmond" width="650px" />
<br />
<div ng-show="showShop">
<p>您的购物车为空:
<a href="#">去逛商场</a>
</p>
</div>
<div ng-show="showTable">
<input type="button" ng-click="deleteMore()" value="批量删除" />
<input type="button" value="清空购物车" ng-click="clearShop()" style="margin-left: 420px; background-color: darkred;color: white;" /><br />
<table border="1px" cellpadding="0" cellspacing="0" width="650px">
<tr>
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>totalPrice</td>
<td>option</td>
</tr>
<tr ng-repeat="x in goods">
<td><input type="checkbox" ng-model="checkAll" value="{{$index}}"></td>
<td>{{x.name}}</td>
<td>{{x.price | currency}}</td>
<td><button ng-click="jianNums($index)">-</button> {{x.num}}
<button ng-click="addNums($index)">+</button>
</td>
<td>{{x.totalPrice=(x.price*x.num) | currency}}</td>
<td>
<input type="button" value="删除" ng-click="deleteGoods(x.name)" />
</td>
</tr>
</table>
<input type="text" value="总价为:{{getTotalPrice()}}" style="width: 650px;" />
</div>
</center>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$http.get("aa.json").then(function(response) {
$scope.goods = response.data;
})
$scope.showTable = true;
$scope.showShop = false;
//数量++
$scope.addNums = function(index) {
$scope.goods[index].num++;
}
//数量--
$scope.jianNums = function(index) {
if($scope.goods[index].num > 1) {
$scope.goods[index].num--;
} else {
var c = confirm("您是否将该商品移除购物车?");
if(c) {
$scope.goods.splice(index, 1);
}
}
}
//商品总价
$scope.getTotalPrice = function() {
var total = 0;
for(var i = 0; i < $scope.goods.length; i++) {
total += ($scope.goods[i].price * $scope.goods[i].num);
}
return total;
}
//批量删除删除
$scope.deleteMore = function() {
if($scope.checkAll) {
$scope.goods = [];
$scope.showTable = false;
$scope.showShop = true;
$scope.checkAll = false;
} else {
var checked = $("input[type='checkbox']:checked");
for(var i = checked.length - 1; i >= 0; i--) {
var c = checked[i].value;
$scope.goods.splice(c, 1);
}
}
}
//删除
$scope.deleteGoods = function(xname) {
for(var i = 0; i < $scope.goods.length; i++) {
var name = $scope.goods[i].name;
if(name == xname) {
$scope.goods.splice(i, 1);
}
}
}
//清空购物车
$scope.clearShop = function() {
$scope.goods = [];
$scope.showTable = false;
$scope.showShop = true;
}
});
</script>
</body>
</html>
2992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
