店铺

最新推荐文章于 2022-09-26 22:32:40 发布
颓默
最新推荐文章于 2022-09-26 22:32:40 发布
阅读量191
点赞数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            margin-left: 10px;
        }
        li{
            list-style: none;
        }
        .add,.reduce{
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            text-align: center;
        }
        .line{
            border-bottom: 1px solid #000;
        }
    </style>
    <script src="angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            $scope.cart=[
                {
                    "shopName":"趣艺工坊",
                    "checked":false,
                    "goods":[
                        {
                            "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
                            "pic":"images/cart_01.jpg",
                            "price":150.00,
                            "number":1,
                            "checked":false
                        },
                        {
                            "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件",
                            "pic":"images/cart_02.jpg",
                            "price":119.00,
                            "number":2,
                            "checked":true
                        },
                        {
                            "goodsName":"装饰木雕，独特趣味设计家具装饰摆件",
                            "pic":"images/cart_03.jpg",
                            "price":120.00,
                            "number":0,
                            "checked":false
                        }
                    ]
                },
                {
                    "shopName":"邻街纸艺",
                    "checked":false,
                    "goods":[
                        {
                            "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
                            "pic":"images/cart_04.jpg",
                            "price":89.00,
                            "number":2,
                            "checked":true
                        },
                        {
                            "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件",
                            "pic":"images/cart_05.jpg",
                            "price":189.00,
                            "number":1,
                            "checked":false
                        }
                    ]
                },
                {
                    "shopName":"纸来我往",
                    "checked":true,
                    "goods":[
                        {
                            "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
                            "pic":"images/cart_06.jpg",
                            "price":289.00,
                            "number":3,
                            "checked":true
                        }
                    ]
                }

            ];
            //点击加减按钮，数量加减;点击删除按钮，删除商品
            $scope.reduce=function(goods){
                goods.number--;
                if (goods.number<=0) goods.number=0;
                $scope.totalMoney();
            };
            $scope.add=function(kind){
                kind.number++;
                $scope.totalMoney();
            };
            $scope.delete=function(item,index){
                item.goods.splice(index,1)
            };
            /*总金额计算*/
            $scope.totalMoney=function(){
                var total=0;
                for(var i=0;i<$scope.cart.length;i++){
                    for(var j=0;j<$scope.cart[i].goods.length;j++){
                        if($scope.cart[i].goods[j].checked){
                            total+=$scope.cart[i].goods[j].price*$scope.cart[i].goods[j].number;
                        }
                    }
                }
                return total;
            };
            /*商铺选择*/
            $scope.shopChecked=function(item){
                if(item.checked==true){
                    for(var i=0;i<item.goods.length;i++){
                        item.goods[i].checked=true
                    }
                }else {
                    for(var i=0;i<item.goods.length;i++){
                        item.goods[i].checked=false;
                    }
                }
            };
            /*全部选择*/
            $scope.allChecked=function(){
                if($scope.allCheck){
                    for(var i=0;i<$scope.cart.length;i++){
                        $scope.cart[i].checked=true;
                        for(var j=0;j<$scope.cart[i].goods.length;j++){
                            $scope.cart[i].goods[j].checked=true;
                        }
                    }
                }else {
                    for(var i=0;i<$scope.cart.length;i++){
                        $scope.cart[i].checked=false;
                        for(var j=0;j<$scope.cart[i].goods.length;j++){
                            $scope.cart[i].goods[j].checked=false;
                        }
                    }
                }
            };
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div><input type="checkbox" ng-model="allCheck" ng-click="allChecked()">总金额：<span>{{ totalMoney() | currency:"￥"}}</span></div>
<div ng-repeat="item in cart" class="line">
    <div><input type="checkbox" ng-model="item.checked" ng-click="shopChecked(item)"><span>{{item.shopName}}</span></div>
    <ul>
        <li ng-repeat="kind in item.goods">
            <input type="checkbox" ng-model="kind.checked"><span>{{kind.goodsName}}</span>
            <p>{{kind.price}}</p>
            <p><span class="add" ng-click="add(kind)">+</span>{{kind.number}}<span class="reduce" ng-click="reduce(kind)">-</span></p>
            <p ng-click="delete(item,$index)">删除</p>
        </li>
    </ul>
</div>

</body>
颓默
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
店铺

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; margin-left: 10px; } li{
复制链接

扫一扫