购物车的趣艺工坊

来源：互联网发布：蓝天超频软件编辑：程序博客网时间：2024/06/05 02:51

<title></title>

<link rel="stylesheet" href="../../ionic/css/ionic.css" />
<script type="text/javascript" src="../../ionic/js/ionic.bundle.min.js"></script>
<script>
var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope) {
$scope.items = [{
name: "纯手工制作木质时钟精致家具",
price: 150,
num: 1,
url: "../image/a.png",
state: false
}, {
name: "纯手工制作木质时钟精致家具",
price: 119,
num: 2,
url: "../image/b.png",
state: false
}, {
name: "纯手工制作木质时钟精致家具",
price: 120,
num: 0,
url: "../image/c.png",
state: false
}];

//完成商品的加减功能
$scope.less = function(index) {
if($scope.items[index].num == 0) {
alert("已经减到0了");
} else {
$scope.items[index].num -= 1;
$scope.allPrice = 0;
for(index in $scope.items) {
if($scope.items[index].state) {
$scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
}
}
}
} //数量增加
$scope.add = function(index) {
$scope.items[index].num += 1;
$scope.allPrice = 0;
for(index in $scope.items) {
if($scope.items[index].state) {
$scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
}
}
}
//删除功能
$scope.delete = function(index) {
if(window.confirm("确定要删除当前项吗？")) {
$scope.items.splice(index, 1);

$scope.allPrice = 0;
for(index in $scope.items) {
if($scope.items[index].state) {
$scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
}
}
}
}

//检测是否有选中项，计算总价
$scope.selectAll = false;
$scope.allPrice = 0;
$scope.checkSelAll = function() {
//判断全选按钮是否选中
if($scope.selectAll) {
//alert(111);
for(index in $scope.items) {
//所有商品状态变为选中
$scope.items[index].state = false;
}
$scope.allPrice = 0;
$scope.selectAll = false;
} else {
//alert("222");
//遍历所有上面计算总价
for(index in $scope.items) {
//所有商品状态变为选中
$scope.items[index].state = true;
}
for(index in $scope.items) {
$scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
//alert($scope.allPrice);
}
$scope.selectAll = true;
}
}

//选中每一个多选按钮，计算当前的总价
$scope.selectItem = function(index) {
$scope.allPrice = 0;
for(index in $scope.items) {
if($scope.items[index].state) {
$scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
}
}
}
});
</script>
<style>
#myInput {
margin-right: 40px;
margin-left: 50px;
}

img {
vertical-align: middle;
margin-top: 6px;
}

#selectAll {
margin-right: 40px;
margin-left: 80px;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar align-title="center" class="bar-positive">
<h1 class="title">购物车</h1>
</ion-header-bar>
<ion-content>
<ion-checkbox ng-model="isChecked">趣艺工坊</ion-checkbox>

<ion-list>
<ion-item ng-repeat="item in items">
<div style="width: 100%; height: 100px;">
<div style="float: left;">
<input id="myInput" ng-click="selectItem($index)" type="checkbox" ng-model="item.state" />
<img src="{{item.url}}" />
</div>
<div style="float: left; margin-left: 50px;">
<span>{{item.name}}</span><br/><br/>
<span>{{item.price}}</span><br /><br />
<button ng-click="less($index)">-</button>
<span>{{item.num}}</span>
<button ng-click="add($index)">+</button>
<span style="margin-left: 200px;" ng-click="delete($index)">删除</span>
</div>
</div>
</ion-item>
</ion-list>

<div style="width: 100%; height: 100px; margin-top: 50px;">
<input id="selectAll" type="checkbox" ng-model="selectAll" ng-click="checkSelAll()" />全选
<span style="margin-left: 250px;">合计：<span>{{allPrice | currency:"￥："}}</span></span>
<button style="margin-left: 50px;">结算</button>
</div>

</ion-content>
</body>

阅读全文

0 0