用AngularJS实现购物车，具体代码如下：
|
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!DOCTYPE html>
<
html
ng-app
=
"app"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
link
href
=
"http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel
=
"stylesheet"
>
<
style
type
=
"text/css"
>
body {
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
ng-controller
=
"firstController"
>
<
table
class
=
"table"
>
<
thead
>
<
tr
>
<
th
>产品编号</
th
>
<
th
>产品名称</
th
>
<
th
>购买数量</
th
>
<
th
>产品单价</
th
>
<
th
>产品总价</
th
>
<
th
>操作</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
ng-repeat
=
"item in Product"
>
<
td
>`item`.`id`</
td
>
<
td
>`item`.`name`</
td
>
<
td
>
<
button
type
=
"button"
class
=
"btn"
ng-click
=
"reduce($index)"
>-</
button
>
<
input
type
=
"text"
name
=
""
value
=
""
placeholder
=
""
ng-model
=
"item.quantity"
>
<
button
type
=
"button"
class
=
"btn"
ng-click
=
"add($index)"
>+</
button
>
</
td
>
<
td
>`item`.`price`</
td
>
<
td
>{{item.quantity*item.price}}</
td
>
<
td
>
<
button
type
=
"button"
class
=
"btn btn-danger"
ng-click
=
"remove($index)"
>移除</
button
>
</
td
>
</
tr
>
<
tr
>
<
td
>总价格：{{totalPrice()}} 元</
td
>
<
td
colspan
=
"4"
>总购买数：{{totalQuantity()}}</
td
>
<
td
>
<
button
type
=
"button"
class
=
"btn btn-danger"
ng-click
=
"removeall()"
>清空购物车</
button
>
</
td
>
</
tr
>
</
tbody
>
</
table
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', []).controller('firstController',
function($scope) {
$scope.Product = [{
id: 1000,
name: "iPhone 6 Plus",
quantity: 1,
price: 6888
}, {
id: 1001,
name: "iPhone 6",
quantity: 1,
price: 5288
}, {
id: 1002,
name: "iPhone 5s",
quantity: 1,
price: 4188
}, {
id: 1003,
name: "iPhone 5c",
quantity: 1,
price: 3288
}];
$scope.totalPrice = function() {
var total = 0;
angular.forEach($scope.Product, function(item) {
total += item.quantity * item.price;
});
return total;
}
$scope.totalQuantity = function() {
var total = 0;
angular.forEach($scope.Product, function(item) {
total += parseInt(item.quantity);
});
return total;
}
$scope.remove = function(index) {
$scope.Product.splice(index, 1);
}
$scope.removeall = function() {
var index;
for (index = $scope.Product.length - 1; index >= 0; index--) {
$scope.remove(index);
}
}
$scope.reduce = function(index) {
if ($scope.Product[index].quantity != 1) {
$scope.Product[index].quantity--;
} else {
var ans = confirm("是否移除该产品？");
if (ans) {
$scope.remove(index);
} else {
$scope.Product[index].quantity = 1;
}
}
}
$scope.add = function(index) {
$scope.Product[index].quantity++;
}
$scope.$watch('Product', function(newValue, oldValue) {
angular.forEach(newValue, function(item, key) {
if (item.quantity < 1) {
var ans = confirm("是否移除该产品？");
if (ans) {
$scope.remove(key);
} else {
item.quantity = oldValue[key].quantity;
}
return;
}
});
}, true);
});
</
script
>
</
body
>
</
html
>
|
ng-repeat实现循环，ng-click后面接点击后触发的事件，firstController内几个函数是自己写的。
这里实现了购物车商品的增减，总价和件数随之变化，商品可以移除，购物车可以清空。
本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1659190，如需转载请自行联系原作者
