<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="ionic/ionic.css" />
<script type="text/javascript" src="ionic/ionic.bundle.min.js" ></script>
<style type="text/css">
#myInput {
margin-right: 40px;
margin-left: 50px;
}
img{
vertical-align: middle;
margin-top: 6px;
}
#selectAll {
margin-right: 40px;
margin-left: 80px;
}
</style>
<script>
var app=angular.module("myApp",["ionic"]);
app.controller("myCtrl",function($scope){
$scope.items=[{
name:"纯手工制作木质时钟精致家具",
price:150,
num:1,
url:"img/a1.png",
state: false
},
{
name:"纯手工制作木质时钟精致家具",
price:119,
num:2,
url:"img/a2.png",
state: false
},
{
name:"纯手工制作木质时钟精致家具",
price:120,
num:0,
url:"img/a3.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)
{
for (index in $scope.items)
{
//所有商品状态变为选中
$scope.items[index].state=false;
}
$scope.allPrice=0;
$scope.selectAll=false;
} else
{
//遍历所有上面计算总价
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;
}
$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>
</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;color:#FF3B30;" 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;">--><a style="margin-left: 50px;" href="https://www.alipay.com/)">结算</a><!--</button>-->
</div>
</ion-content>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="ionic/ionic.css" />
<script type="text/javascript" src="ionic/ionic.bundle.min.js" ></script>
<style type="text/css">
#myInput {
margin-right: 40px;
margin-left: 50px;
}
img{
vertical-align: middle;
margin-top: 6px;
}
#selectAll {
margin-right: 40px;
margin-left: 80px;
}
</style>
<script>
var app=angular.module("myApp",["ionic"]);
app.controller("myCtrl",function($scope){
$scope.items=[{
name:"纯手工制作木质时钟精致家具",
price:150,
num:1,
url:"img/a1.png",
state: false
},
{
name:"纯手工制作木质时钟精致家具",
price:119,
num:2,
url:"img/a2.png",
state: false
},
{
name:"纯手工制作木质时钟精致家具",
price:120,
num:0,
url:"img/a3.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)
{
for (index in $scope.items)
{
//所有商品状态变为选中
$scope.items[index].state=false;
}
$scope.allPrice=0;
$scope.selectAll=false;
} else
{
//遍历所有上面计算总价
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;
}
$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>
</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;color:#FF3B30;" 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;">--><a style="margin-left: 50px;" href="https://www.alipay.com/)">结算</a><!--</button>-->
</div>
</ion-content>
</body>
</html>