<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>購物車</title>
<link href="lib/css/ionic.min.css" rel="stylesheet" />
<script src="lib/js/ionic.bundle.min.js"></script>
<script>
angular.module("myApp", ["ionic"])
.controller("OneDeom", function($scope) {
//遍歷數組
$scope.datas = [{
"id": 0,
"img": "img/head.jpg",
"title": "標題1",
"price": 100,
"num": 1,
"state": false
},
{
"id": 1,
"img": "img/head.jpg",
"title": "標題二",
"price": 200,
"num": 1,
"state": false
},
{
"id": 2,
"img": "img/head.jpg",
"title": "標題三",
"price": 300,
"num": 1,
"state": false
}
];
//按＋號
$scope.more = function(good) {
good.num = good.num + 1;
};
//按-號
$scope.less = function(good) {
//如果購物車的商品數量小於1
if(good.num <= 1) {
//循環數組
for(var i = 0; i < $scope.datas.length; i++) {
//數組裏的某個id和購物車裏商品的id相同
if($scope.datas[i].id == good.id) {
$scope.datas.splice(i, 1); //從購物車中把商品移除
}
}
} else { //如果購物車的商品數量大於1
good.num = good.num - 1;
}
};
//計算總數量的函數, 提供返回值
$scope.count = function() {
var i = 0; //購物車數量總計
for(g in $scope.datas) { //遍歷數組
if($scope.datas[g].state) { //每個商品狀態選擇狀態
i = i + $scope.datas[g].num;
}
}
return i;
}
//計算總價方法,提供返回值
$scope.sumPrice = function() {
var sum = 0; //總價
for(g in $scope.datas) {
if($scope.datas[g].state) {
sum = sum + ($scope.datas[g].price * $scope.datas[g].num);
}
}
return sum;
}
//直接 刪除該商品
$scope.del = function(good) {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id == good.id) {
$scope.datas.splice(i, 1); //從購物車中把商品移除
}
}
}
//全部選中/全取消選中
$scope.ckAll = function() {
var b = $scope.isck; //b:true 勾選 b:false:取消勾選
for(var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].state = b; //改變的選擇狀態
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="OneDeom">
<div class="content">
<ul class="list">
<li class="item" ng-repeat="good in datas ">
<input type="checkbox" ng-model="good.state" />
<img src={{good.img}} />
<h3>{{good.title}}</h3>
<span>{{good.price}}</span>
<button ng-click="less(good)">- </button> {{good.num}} <button ng-click="more(good)">+</button>
<button ng-click="del(good)">刪除 </button>
</li>
</ul>
</div>
<div>
<input type="checkbox" ng-model="isck" ng-click="ckAll()" />全選 合計<span ng-bind="sumPrice()"></span> 總計<span ng-bind="count()"></span>
<button class="button-dark">結算</button>
</div>
</body>
</html>
購物車管理
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
New CA Technologies CEO: Who Is Michael Gregoire?
CA Technologies (NASDAQ: CA) has named Michael P. Gregoire as CEO, effecti