ionic购物车_修改_多选_结算显示勾选个数_总额

最新推荐文章于 2019-12-18 13:38:47 发布

Cometsinthenightsky

最新推荐文章于 2019-12-18 13:38:47 发布

阅读量657

点赞数

本文链接：https://blog.csdn.net/qq_39443545/article/details/79081211

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width" />
		<link href="../lib/css/ionic.css" rel="stylesheet">
		<script src="../lib/js/ionic.bundle.js"></script>
		<style>
			input{
				text-align: center;
			}
		</style>
		<script>
			angular.module("myApp", [])
				.controller("democ", function($scope) {
					/* 1 创建数据的操作  */
					$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="democ">
		<!--头部 -->
		<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>10元任选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: #999; 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>

Cometsinthenightsky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic购物车_修改_多选_结算显示勾选个数_总额

input{ text-align: center; } angular.module("myApp", []) .controller("democ", function($scope) { /* 1 创建数据的操作 */ $scope.datas = [{ state: false, head: "htt
复制链接

扫一扫