找回密码
当前位置：前端开发者 > AngularJS > 正文

AngularJS 购物车简易小Demo

2018-11-05 分类：AngularJS 阅读(596) 评论(0)
前端开发 流程
一般公司前端开发流程
现代前端开发流程图

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>AngularJS 购物车实例测试</title>
    <script type=”text/javascript” src=”http://libs.visualtec.cn/angular1/angular.min.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            font-size: 62.6%;
            font-family: “Microsoft Yahei”, sans-serif;
            line-height: 1;
        }
        a {
            text-decoration: none;
            color: grey;
        }
        ul,
        li {
            list-style: none;
        }
        .checkbox {
            vertical-align: middle;
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
        }
        .checkbox .box {
            border-radius: 4px;
            position: absolute;
            display: block;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            transition: all 0.5s;
        }
        .checkbox input[type=”checkbox”] {
            position: absolute;
            z-index: 10;
            opacity: 0;
        }
        .checkbox input:checked+.box {
            border-color: red;
        }
        .checkbox input:checked+.box::after {
            position: absolute;
            display: block;
            content: ‘ ‘;
            width: 10px;
            height: 10px;
            background-color: red;
            top: 3px;
            left: 3px;
        }
        body {
            font-size: 1.4rem;
        }
        .wrap {
            margin-top: 3rem;
        }
        .wrap ul {
            display: block;
            width: 100%;
            margin-bottom: 3rem;
        }
        .wrap li {
            /*display:table-cell;*/
            margin: 1rem auto;
            text-align: center;
            width: 20rem;
            height: 16rem;
            padding: 1rem;
            border: 0.4rem solid #ccc;
            border-radius: 0.8rem;
            transition: all 0.5s;
        }
        .wrap li.active {
            border-color: rgb(218, 30, 30);
        }
        .contentW {
            font-size: 1.6rem;
            height: 3.2rem;
            /*line-height: 3.2rem;*/
            text-align: left;
        }
        .buttonW a {
            display: inline-block;
            padding: 0.8rem 0.6rem;
            background-color: rgb(218, 30, 30);
            color: #fff;
            font-size: 1.6rem;
            border-radius: 0.4rem;
        }
        .buttonW .addc {
            vertical-align: middle;
            display: inline-block;
        }
        a.calc {
            display: inline-block;
            vertical-align: middle;
            border: 1px solid #999;
            width: 22px;
            height: 22px;
            text-align: center;
        }
        .contentW span {
            display: inline-block;
            vertical-align: middle;
        }
        .buttonW a.cancel {
            background-color: #FFE47C;
        }
        .price {
            display: table;
            margin: 0 auto;
            /*text-align:center;*/
        }
        .price p {
            font-size: 1.8rem;
        }
        .price a {
            display: inline-block;
            background: rgb(218, 30, 30);
            padding: 0.8rem 2rem;
            margin-left: 1rem;
            color: #fff;
            border-radius: 0.8rem;
        }
        a.nobuy {
            border-color: #eee;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class=”container” ng-app=”cartApp” ng-controller=”cartCtrl”>
        <div class=”wrap”>
            <ul>
                <li class=”{{fruit.buy?’active’:”}}” ng-repeat=”fruit in fruits” item={{fruit.id}}>
                    <p class=”contentW”>
                        名称：{{fruit.name}}
                    </p>
                    <p class=”contentW”>
                        单价：{{fruit.price}}
                    </p>
                    <p class=”contentW”>
                        数量：
                        <a href=”javascript:;” class=”calc {{fruit.num<=1?’nobuy’:”}}” ng-click=”overdue(fruit.id)”>-</a>
                        <span>{{fruit.num}}</span>
                        <a href=”javascript:;” class=”calc {{fruit.num>=10?’nobuy’:”}}” ng-click=”add(fruit.id)”>+</a>
                    </p>
                    <div class=”buttonW”>
                        <div class=”checkbox”>
                            <input type=”checkbox” id=”{{fruit.id}}” ng-model=”fruit.buy”>
                            <span class=”box”></span>
                        </div>
                        <label class=”addc” for=”{{fruit.id}}”>添加到购物车</label>
                    </div>
                </li>
            </ul>
            <div class=”price”>
                <p>总价：{{totalPrice()}}</p>
                <a href=”javascript:;”>去结算</a>
            </div>
        </div>
    </div>
</body>
</html>
<script type=”text/javascript”>
    var fruits = [
        {
            id: ‘fruit1’,
            name: “苹果”,
            price: “10”,
            num: 1,
            buy: false
        },
        {
            id: ‘fruit2’,
            name: “香蕉”,
            price: “1”,
            num: 1,
            buy: false
        },
        {
            id: ‘fruit3’,
            name: “橘子”,
            price: “20”,
            num: 1,
            buy: false
        }
    ];
    angular.module(‘cartApp’, [])
        .controller(‘cartCtrl’, function ($scope) {
            //取出水果
            $scope.fruits = fruits;
            //点击-事件
            $scope.overdue = function (id) {
                angular.forEach($scope.fruits, function (value, key) {
                    if (value.id == id && value.num > 1) {
                        $scope.fruits[key].num–;
                    }
                });
            }
            $scope.add = function (id) {
                angular.forEach($scope.fruits, function (value, key) {
                    if (value.id == id && value.num < 10) {
                        $scope.fruits[key].num++;
                    }
                });
                // $scope.value.num = $scope.value.num+1;
            }
            // $scope.isBuy = function(buy, $event){
            // console.log(buy, $event)
            // }
            $scope.totalPrice = function () {
                $scope.total = 0;
                angular.forEach($scope.fruits, function (value, key) {
                    if (value.buy) {
                        $scope.total = $scope.total + value.price * value.num;
                    }
                });
                console.log($scope.total)
                return $scope.total;
            }
        });
</script>
前端模块化开发流程图
前端开发的详细流程图
公众号前端开发流程图文
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论