-
Notifications
You must be signed in to change notification settings - Fork 0
/
shoppingCar.html
116 lines (107 loc) · 2.49 KB
/
shoppingCar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.0/angular.js"></script>
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-app="app">
<div class="container" ng-controller="car">
<table class="table">
<thead>
<tr>
<td>产品编号</td>
<td>产品名字</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart">
<td>{{item.id}}</td>
<td>{{item.names}}</td>
<td><button class="btn" ng-click="reduce(item)">-</button> {{item.quantity}}<button ng-click="add(item)" class="btn">+</button></td>
<td>{{item.price}}</td>
<td>{{item.price*item.quantity}}</td>
<td class="btn btn-danger" ng-click="remove(item.id)">移除</td>
</tr>
<tr>
<td>总价 {{totalPrice()}}</td>
<td>总数量 {{all_count()}}</td>
<td class="btn btn-danger" ng-click="removeAll()">清空购物车</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('car',['$scope', function($scope){
$scope.cart = [
{
id:1000,
names:'mi',
quantity:1,
price:2999
},
{
id:1001,
names:'mi1',
quantity:1,
price:1999
},
{
id:1020,
names:'mi2',
quantity:1,
price:3999
},
{
id:1030,
names:'mac',
quantity:1,
price:8999
}
];
$scope.totalPrice = function(){
var total = 0;
angular.forEach($scope.cart,function(item){
total += item.quantity * item.price;
})
return total;
};
$scope.all_count = function(){
var count = 0;
angular.forEach($scope.cart,function(item){
count += item.quantity;
})
return count;
}
$scope.remove = function(id){
var index;
angular.forEach($scope.cart,function(item,key){
if (item.id===id){
index = key;
}
});
$scope.cart.splice(index,1);
};
$scope.removeAll = function(){
$scope.cart ={};
};
$scope.add = function(item){
item.quantity++;
}
$scope.reduce = function(item){
if( item.quantity<=0 ){
alert('不能小于o0')
item.quantity=1
}
item.quantity--;
}
}])
</script>
</body>
</html>