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
| <!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script type="text/javascript" src = "js/angular.js"></script>
<style type="text/css">
.item{
height: 200px;
width:100px;
margin:5px;
border:1px solid #ccc;
float:left;
}
</style>
</head>
<body ng-app = "mapp" ng-controller = "mctrl">
<!--
<div class = "list">
<div class = "item" ng-repeat = "item in items">
<p class = "item-name"><span>商品名:</span>{{item.name}}</p>
<p class = "item-price"><span>价格:</span>{{item.price|currency:"￥"}}</p>
<input type = "button" ng-click = "buy($index)" value = "购买">
</div>
</div>
-->
<div class = "item-car">
<p ng-repeat = "item in items">
<span>{{item.name}}</span>
<span>{{item.price|currency:"单价"}}</span>
<input type = "button" value = "-" ng-click = "minus($index)"/>
<input type = "text" ng-model = "varlist.itemNum[$index]">
<input type = "button" value = "+" ng-click = "add($index)"/>
<span>单件总价:{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span>
</p>
<p>总价：{{varlist.total|number:2}}</p>
</div>
<span style="background-color: #339966;"></span>
<script type="text/javascript">
var app = angular.module("mapp", []);
app.controller("mctrl", function($scope) {
// 数据源
$scope.items = [{
"name": "王老吉",
"price": 4
}, {
"name": "老干妈",
"price": 7.5
}, {
"name": "臭豆腐",
"price": 7.32
}, {
"name": "饼干",
"price": 22
}, ];
var len = $scope.items.length;
var arr = [];
// 循环为数组赋值
for (var i = 0; i < len; i++) {
arr[i] = 0;
}
// 检测是否变化，为了总价能够改变
$scope.$watch("varlist.itemNum", function() {
getTotal();
}, true);
// 定义变量
$scope.varlist = {
itemNum: arr,
total: 0
}
// 购物的时候操作
$scope.buy = function($index) {
$scope.varlist.itemNum[$index]++;
getTotal();
}
// -----
$scope.minus = function($index) {
if ($scope.varlist.itemNum[$index] == 0) {
return;
} else {
$scope.varlist.itemNum[$index]--;
getTotal();
}
}
// ++++
$scope.add = function($index) {
$scope.varlist.itemNum[$index]++;
getTotal();
}
// 计算总价
var getTotal = function($index) {
$scope.varlist.total = 0;
for (var j = 0; j < len; j++) {
$scope.varlist.total = $scope.varlist.total + $scope.varlist.itemNum[j] * $scope.items[j].price;
}
return $scope.varlist.total;
}
});
</script>
<span style="background-color: #339966;"></span>
</body>
</html>
|
