<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h3 {
margin-right: 400px;
}
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
#mydiv {
display: none
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
//初始化數據
$scope.goods = [{
name: "qq",
price: 12.9,
number: 2,
state: false
},
{
name: "wx",
price: 23.9,
number: 12,
state: false
},
{
name: "fd",
price: 45.9,
number: 23,
state: false
},
{
name: "asd",
price: 99.9,
number: 9,
state: false
}
];
//刪除單個
$scope.dele = function(index) {
//刪除
$scope.goods.splice(index, 1);
};
//數量減少有個
$scope.reduce = function(index) {
var num = $scope.goods[index].number;
if($scope.goods[index].number > 1) {
$scope.goods[index].number--;
} else if($scope.goods[index].number == 1) {
if(confirm("否刪除該商品")) {
//如果數量小於1 刪除 商品
$scope.goods.splice(index, 1);
} else {
$scope.goods[index].number = num;
}
}
};
//數量增加一個
$scope.add = function(index) {
$scope.goods[index].number++;
};
//計算總價
$scope.allSum = function() {
var allPrice = 0;
var money;
for(var i = 0; i < $scope.goods.length; i++) {
allPrice += $scope.goods[i].price * $scope.goods[i].number;
}
money = "¥" + allPrice;
return money;
};
//全選 反選
$scope.selectAll = false;
$scope.all = function(m) {
for(var i = 0; i < $scope.goods.length; i++) {
if(m == true) {
$scope.goods[i].state = true;
} else {
$scope.goods[i].state = false;
}
}
};
//批量刪除
$scope.deleteSel = function() {
var userNames = [];
//遍歷users數組，獲取狀態是選中的user對象的名字
for(index in $scope.goods) {
if($scope.goods[index].state == true) {
userNames.push($scope.goods[index].name);
}
}
if(userNames.length > 0) {
if(confirm("是否刪除選中項？")) {
for(i in userNames) {
var name = userNames[i];
for(i2 in $scope.goods) {
if($scope.goods[i2].name == name) {
$scope.goods.splice(i2, 1);
}
if($scope.goods.length == 0) {
$(function() {
$("table").hide();
$("#mydiv").show();
});
}
}
}
}
} else {
alert("請選擇刪除項");
}
};
//刪除全部
$scope.deleteall = function() {
$scope.goods.splice($scope.goods);
$(function() {
$("table").hide();
$("#mydiv").show();
});
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<h3>我的購物車</h3>
<table border="1" cellpadding="10" cellspacing="0" align="center">
<tr align="center">
<td colspan="6">
<input type="button" ng-click="deleteall()" value="清空購物車" style=" background-color: #A94442; color: white; margin-left: 520px;" />
<input type="button" ng-click="deleteSel()" value="批量刪除" style=" background-color: #A94442; color: white; " />
</td>
</tr>
<tr align="center">
<th>
<input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)" />
</th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
<tr ng-repeat="g in goods" align="center">
<td>
<input ng-model="g.state" type="checkbox" ng-checked="selectAll" />
</td>
<td>{{g.name}}</td>
<td>{{g.price | currency:"¥" }}</td>
<td>
<input type="button" value="-" style="background-color: #0000FF; color: white;" ng-click="reduce($index)" />
<input type="text" ng-model="g.number" style="width: 25px;" />
<input type="button" value="+" style="background-color: #0000FF; color: white;" ng-click="add($index)" />
</td>
<td>{{g.number*g.price | currency:"¥" }}</td>
<td>
<input type="button" value="刪除" style="background-color: #0000FF; color: white;" ng-click="dele($index)" />
</td>
</tr>
<tr>
<td colspan="6">
總價爲:<span ng-bind="allSum()"></span>
</td>
</tr>
</table>
<div id="mydiv">
您的購物車爲空,<b style="color: #008080;">去逛商城</b>
</div>
</center>
</body>
</html>
