AngularJS實(shí)現(xiàn) 購物車
2018-07-20 來源：open-open
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script type="text/javascript" src = "lib/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>價(jià)格:</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:"單價(jià)"}}   </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>單件總價(jià):{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span>
</p>
<p>總價(jià)：{{varlist.total|number:2}}</p>
</div>
<span style="background-color: #339966;"><script type="text/javascript"></span>
var app = angular.module("mapp", []);
app.controller("mctrl", function($scope) {
// 數(shù)據(jù)源
$scope.items = [{
"name": "王老吉",
"price": 4
}, {
"name": "老干媽",
"price": 7.5
}, {
"name": "臭豆腐",
"price": 7.32
}, {
"name": "餅干",
"price": 22
}, ];
var len = $scope.items.length;
var arr = [];
// 循環(huán)為數(shù)組賦值
for (var i = 0; i < len; i++) {
arr[i] = 0;
}
// 檢測(cè)是否變化，為了總價(jià)能夠改變
$scope.$watch("varlist.itemNum", function() {
getTotal();
}, true);
// 定義變量
$scope.varlist = {
itemNum: arr,
total: 0
}
// 購物的時(shí)候操作
$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();
}
// 計(jì)算總價(jià)
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;
}
});
<span style="background-color: #339966;"></script></span>
</body>
</html><br><br>2015-01-19 10:54:27 linJS
來自：http://www.cnblogs.com/lin-js/p/4233213.html
標(biāo)簽：
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
上一篇:php讀寫文件代碼
最新資訊
熱門推薦