<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width"/>
<link href="../Day15/bao/ionic.css" rel="stylesheet" />
<script src="../Day15/bao/ionic.bundle.js"></script>
<style>
input{
text-align: center;
}
</style>
<script>
angular.module("myApp",[])
.controller("coun",function($scope){
$scope.datas = [{
state: false,
head: "https://img12.360buyimg.com/n1/jfs/t12223/184/496496336/324104/74ab9eb0/5a0d3eb2N5604ef8d.jpg",
title: "新鲜水果",
price: 3.8,
num: 1
},{
state: false,
head: "https://img10.360buyimg.com/jdcms/s130x130_jfs/t3220/28/2650111828/190096/d36bddd4/57e4c912Nf23ee79b.jpg!q80.webp",
title: "鸳鸯柚子2粒装",
price: 19.8,
num: 1
},{
state: false,
head: "https://img11.360buyimg.com/jdcms/s130x130_jfs/t9445/267/2454589847/216899/d2f252ed/59cf3955N38166d89.jpg!q80.webp",
title: "阳澄湖大闸蟹",
price: 209,
num: 1
}];
$scope.ckAll = function(){
var isck = $scope.ckall;
for(var i in $scope.datas){
$scope.datas[i].state = isck;
}
}
$scope.count =0;
$scope.sumprice = function(){
var sum = 0;
$scope.count = 0;
for(var i in $scope.datas){
if($scope.datas[i].state){
sum+=$scope.datas[i].price*$scope.datas[i].num;
$scope.count += $scope.datas[i].num;
}
}
return sum;
}
$scope.update = function(index,num){
$scope.datas[index].num = $scope.datas[index].num+num;
if($scope.datas[index].num==0){
$scope.datas.splice(index,1);
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="coun">
<div class="bar bar-header">
<h2 class="title">我的购物车</h2>
<h3 class="title title-right" style="font-size: 10px;">管理</h3>
</div>
<div class="content has-header has-footer padding">
<div class="list" style="padding-bottom: 40px;">
<div class="item item-divider">
<span>15元任选3件</span>
<span style="float: right;">去凑单</span>
</div>
<a class="item" href="#" style="min-height: 100px;display: flex;" ng-repeat="data in datas">
<label class="checkbox" style="padding: 0px;">
<input type="checkbox" ng-model="data.state"/>
</label>
<img src="{{data.head}}" style="width: 80px; height: 80px;"/>
<div style="padding: 0px 10px; display: flex; flex-direction: column;">
<div>[次日达]{{data.title}}</div>
<div style="margin-top: 18px;width: 100%;display:flex ;flex-direction: column;">
<div>{{data.price|currency:"￥"}}</div>
<div style="float: right;">
<button ng-click="update($index,1)">+</button>
<input ng-model="data.num" style="width: 40px; margin: 0px;"/>
<button ng-click="update($index,-1)">-</button>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="bar bar-footer" style="background: pink; height: 70px;">
<label class="checkbox">
<input type="checkbox" ng-click="ckAll()" ng-model="ckall"/>全选
</label>
<div style="margin-left: 100px;">
<h2>合计{{sumprice()|currency:"￥"}}</h2>
总额:{{sumprice()|currency:"￥"}}
优惠:{{0|currency:"￥"}}
</div>
<button class="button button-assertive pull-right" style="width: 100px;">结算({{count}})</button>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width"/>
<link href="../Day15/bao/ionic.css" rel="stylesheet" />
<script src="../Day15/bao/ionic.bundle.js"></script>
<style>
input{
text-align: center;
}
</style>
<script>
angular.module("myApp",[])
.controller("coun",function($scope){
$scope.datas = [{
state: false,
head: "https://img12.360buyimg.com/n1/jfs/t12223/184/496496336/324104/74ab9eb0/5a0d3eb2N5604ef8d.jpg",
title: "新鲜水果",
price: 3.8,
num: 1
},{
state: false,
head: "https://img10.360buyimg.com/jdcms/s130x130_jfs/t3220/28/2650111828/190096/d36bddd4/57e4c912Nf23ee79b.jpg!q80.webp",
title: "鸳鸯柚子2粒装",
price: 19.8,
num: 1
},{
state: false,
head: "https://img11.360buyimg.com/jdcms/s130x130_jfs/t9445/267/2454589847/216899/d2f252ed/59cf3955N38166d89.jpg!q80.webp",
title: "阳澄湖大闸蟹",
price: 209,
num: 1
}];
$scope.ckAll = function(){
var isck = $scope.ckall;
for(var i in $scope.datas){
$scope.datas[i].state = isck;
}
}
$scope.count =0;
$scope.sumprice = function(){
var sum = 0;
$scope.count = 0;
for(var i in $scope.datas){
if($scope.datas[i].state){
sum+=$scope.datas[i].price*$scope.datas[i].num;
$scope.count += $scope.datas[i].num;
}
}
return sum;
}
$scope.update = function(index,num){
$scope.datas[index].num = $scope.datas[index].num+num;
if($scope.datas[index].num==0){
$scope.datas.splice(index,1);
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="coun">
<div class="bar bar-header">
<h2 class="title">我的购物车</h2>
<h3 class="title title-right" style="font-size: 10px;">管理</h3>
</div>
<div class="content has-header has-footer padding">
<div class="list" style="padding-bottom: 40px;">
<div class="item item-divider">
<span>15元任选3件</span>
<span style="float: right;">去凑单</span>
</div>
<a class="item" href="#" style="min-height: 100px;display: flex;" ng-repeat="data in datas">
<label class="checkbox" style="padding: 0px;">
<input type="checkbox" ng-model="data.state"/>
</label>
<img src="{{data.head}}" style="width: 80px; height: 80px;"/>
<div style="padding: 0px 10px; display: flex; flex-direction: column;">
<div>[次日达]{{data.title}}</div>
<div style="margin-top: 18px;width: 100%;display:flex ;flex-direction: column;">
<div>{{data.price|currency:"￥"}}</div>
<div style="float: right;">
<button ng-click="update($index,1)">+</button>
<input ng-model="data.num" style="width: 40px; margin: 0px;"/>
<button ng-click="update($index,-1)">-</button>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="bar bar-footer" style="background: pink; height: 70px;">
<label class="checkbox">
<input type="checkbox" ng-click="ckAll()" ng-model="ckall"/>全选
</label>
<div style="margin-left: 100px;">
<h2>合计{{sumprice()|currency:"￥"}}</h2>
总额:{{sumprice()|currency:"￥"}}
优惠:{{0|currency:"￥"}}
</div>
<button class="button button-assertive pull-right" style="width: 100px;">结算({{count}})</button>
</div>
</body>
</html>
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
