<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width" /><!-- 链接ionic包下的 外部样式文件 --><link href="../lib/css/ionic.css" rel="stylesheet"><!-- ionic包 ionic.bundle.min.js anglarjs的语法 --><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>