<!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