购物车管理

来源：互联网发布：日本清酒知乎编辑：程序博客网时间：2024/06/03 09:30
<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>购物车</title>    <link href="lib/css/ionic.min.css" rel="stylesheet" />    <script src="lib/js/ionic.bundle.min.js"></script>    <script>        angular.module("myApp", ["ionic"])            .controller("OneDeom", function($scope) {                //遍历数组                $scope.datas = [{                        "id": 0,                        "img": "img/head.jpg",                        "title": "标题1",                        "price": 100,                        "num": 1,                        "state": false                    },                    {                        "id": 1,                        "img": "img/head.jpg",                        "title": "标题二",                        "price": 200,                        "num": 1,                        "state": false                    },                    {                        "id": 2,                        "img": "img/head.jpg",                        "title": "标题三",                        "price": 300,                        "num": 1,                        "state": false                    }                ];                //按＋号                $scope.more = function(good) {                    good.num = good.num + 1;                };                //按-号                $scope.less = function(good) {                    //如果购物车的商品数量小于1                    if(good.num <= 1) {                        //循环数组                        for(var i = 0; i < $scope.datas.length; i++) {                            //数组里的某个id和购物车里商品的id相同                            if($scope.datas[i].id == good.id) {                                $scope.datas.splice(i, 1); //从购物车中把商品移除                                            }                        }                    } else { //如果购物车的商品数量大于1                        good.num = good.num - 1;                    }                };                //计算总数量的函数, 提供返回值                 $scope.count = function() {                    var i = 0; //购物车数量总计                    for(g in $scope.datas) { //遍历数组                        if($scope.datas[g].state) { //每个商品状态选择状态                            i = i + $scope.datas[g].num;                        }                    }                    return i;                }                //计算总价方法,提供返回值                $scope.sumPrice = function() {                    var sum = 0; //总价                    for(g in $scope.datas) {                        if($scope.datas[g].state) {                            sum = sum + ($scope.datas[g].price * $scope.datas[g].num);                        }                    }                    return sum;                }                //直接 删除该商品                $scope.del = function(good) {                    for(var i = 0; i < $scope.datas.length; i++) {                        if($scope.datas[i].id == good.id) {                            $scope.datas.splice(i, 1); //从购物车中把商品移除                                        }                    }                }                //全部选中/全取消选中                $scope.ckAll = function() {                    var b = $scope.isck; //b:true 勾选  b:false:取消勾选                    for(var i = 0; i < $scope.datas.length; i++) {                        $scope.datas[i].state = b; //改变的选择状态                    }                }            });    </script></head><body ng-app="myApp" ng-controller="OneDeom">    <div class="content">        <ul class="list">            <li class="item" ng-repeat="good in datas ">                <input type="checkbox" ng-model="good.state" />                <img src={{good.img}} />                <h3>{{good.title}}</h3>                <span>{{good.price}}</span>                <button ng-click="less(good)">- </button> {{good.num}} <button ng-click="more(good)">+</button>                <button ng-click="del(good)">删除 </button>            </li>        </ul>    </div>    <div>        <input type="checkbox" ng-model="isck" ng-click="ckAll()" />全选 合计<span ng-bind="sumPrice()"></span> 总计<span ng-bind="count()"></span>        <button class="button-dark">结算</button>    </div></body></html>
阅读全文
0 0