Angular实现简单购物车效果(代码)

最新推荐文章于 2024-05-13 14:54:25 发布

精灵无悔

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量1.7k

点赞数 1

分类专栏：购物车 angular简单使用架构文章标签：购物车 angular

本文链接：https://blog.csdn.net/v_111/article/details/70824893

版权

架构同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

购物车 angular简单使用

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/lib/AngularJS/angular.min.js"></script>
    <style>
        input{
            width: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container" ng-controller="myCtrl">
        <div class="row">
            <div class="page-header">
                <h2>购物车</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover">
                    <tr>
                        <td>#</td>
                        <td>商品名</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>总价</td>
                        <td>操作</td>
                    </tr>
                    <tr ng-repeat="goods in goodses" id="ad">
                        <td><span ng-bind="goods.goodsID"></span></td>
                        <td><span ng-bind="goods.goodsName"></span></td>
                        <td><span ng-bind="goods.goodsPrice"></span></td>
                        <td><input type="text" ng-model="goods.count"></td>
                        <td><span ng-bind="goods.goodsPrice*goods.count"></span></td>
                        <td><a href="" ng-click="delete($index)">删除</a></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>总计金额:{{all()}}</td>
                        <td>运费:{{fei()}}</td>
                        <td>实际金额:{{total()}}</td>
                        <td><a href="" ng-click="del($index)">清空购物车</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
<script>
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",["$scope",function ($scope) {
        $scope.goodses=[
            {goodsID:1,goodsName:"商品A",goodsPrice:12,count:1,subtotal:12},
            {goodsID:2,goodsName:"商品B",goodsPrice:18,count:1,subtotal:18},
            {goodsID:3,goodsName:"商品C",goodsPrice:13,count:1,subtotal:13},
            {goodsID:4,goodsName:"商品D",goodsPrice:8,count:1,subtotal:8},
            {goodsID:5,goodsName:"商品E",goodsPrice:10,count:1,subtotal:10},
        ];

        $scope.delete=function ($index) {
            $scope.goodses.splice($index,1)
        }

        $scope.del=function ($index) {
            $scope.goodses=[];
        }
        $scope.all=function () {
            var all=0;
            for(var i=0;i<$scope.goodses.length;i++){
                all+=$scope.goodses[i].goodsPrice*$scope.goodses[i].count;
            }
            return all;
        }

        $scope.fei=function () {
            var fei=0;
            var all=0;
            for(var i=0;i<$scope.goodses.length;i++){
                all+=$scope.goodses[i].goodsPrice*$scope.goodses[i].count;
            }
            if(all<=0){
                fei=0
            }else if(all<100){
                fei=10;
            }else if(all<200){
                fei=20
            }else if(all<500){
                fei=30
            }
            return fei;
        }


        $scope.total=function () {
            var fei=0;
            var all=0;
            for(var i=0;i<$scope.goodses.length;i++){
                all+=$scope.goodses[i].goodsPrice*$scope.goodses[i].count;
            }
            if(all<=0){
                fei=0
            }else if(all<100){
                fei=10;
            }else if(all<200){
                fei=20
            }else if(all<500){
                fei=30
            }
            all+=fei;
            return all;
        }



    }])
</script>
</html>

精灵无悔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular实现简单购物车效果(代码)

html ng-app="myApp">head> meta charset="UTF-8"> title>Titletitle> link rel="stylesheet" href="css/bootstrap.min.css"> script src="js/lib/AngularJS/angular.min.js">script> style>
复制链接

扫一扫

专栏目录