（angularjs ）购物车案例

最新推荐文章于 2018-10-19 11:15:58 发布

迷人的脚毛

最新推荐文章于 2018-10-19 11:15:58 发布

阅读量305

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/qq_40090482/article/details/78292650

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>购物</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery-2.1.0.js"></script>
    <style>
        span{padding-left:50px;padding-right:60px;}
    </style>
    <script>
        var app=angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            //声明数据对象，初始化商品信息
            $scope.shopList=[
                { name:'单片机',price:'80.90',num:1},
                { name:'电烙铁',price:'20.40',num:1},
                { name:'万用表',price:'46.90',num:1},
                { name:'示波器',price:'21.10',num:1},
                { name:'电饭锅',price:'79.30',num:1}
            ];
            //点击减少  
            $scope.reduce= function (index) {
                if($scope.shopList[index].num>1){
                    $scope.shopList[index].num--;
                }else{
                    $scope.remove(index);
                }
            };
            //点击增加  
            $scope.add=function(index){
                $scope.shopList[index].num++;
            };
            //计算总价  
            $scope.allSum=function(){
                var allPrice = 0;
                for(var i= 0;i<$scope.shopList.length;i++){
                    allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;
                }
                return allPrice;
            };
            //计算总数量  
            $scope.allNum=function(){
                var allShu=0;
                for(var i=0;i<$scope.shopList.length;i++){
                    allShu+=$scope.shopList[i].num;
                }
                return allShu;
            };
            //移除一项  
            $scope.remove=function(index){
                if(confirm('您是否将商品移除购物车？')){
                    $scope.shopList.splice(index,1);
                }
            };
            //使得输入框中不得小于等于0  
            $scope.change=function(index){
                if($scope.shopList[index].num>=1){
                }else{
                    $scope.shopList[index].num=1;
                }
            };
            //清空购物车  
            $scope.removeAll=function(){
                if(confirm('确定清空购物车')){
                    $scope.shopList=[];
                }
            }

        });

    </script>
</head>
<body ng-app="myApp">
<div class="container">
    <h1>我的购物车</h1>
    <div ng-controller="myCtrl">
        <button class="btn btn-warning "ng-click="removeAll()" style="background-color:#D9534F; color: white; margin-left:10px;">清空购物车</button>
        <ul class="list-group">
            <li class="list-group-item">
                <span><input type="checkbox" ng-model="select_all"/></span>
                <span>name</span>
                <span>price</span>
                <span>number</span>
                <span>totalPrice</span>
                <span>option</span>
            </li>
            <!--
                
                描述：用ng-repaet指令将对象遍历并渲染到页面中
            -->
            <li ng-repeat="shop in shopList" class="list-group-item">
                <span><input ng-model="select_all" type="checkbox" /></span>
                <span>{{shop.name}}</span>
                <span>{{shop.price|currency : '￥'}}</span>
                <span>  
                    <button ng-click="reduce($index)" style="background-color:#337AB7;">-</button>  
                    <input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)" style="width: 30px;">  
                    <button ng-click="add($index)" style="background-color:#337AB7;">+</button>  
                </span>
                <span>{{shop.price*shop.num|currency : '￥'}}</span>
                <button class="btn btn-primary btn-xs" ng-click="remove($index)" style="background-color:#337AB7;">删除</button>
            </li>
            <li class="list-group-item">总价为：￥<span ng-bind="allSum()"></span></li>
        </ul>

    </div>
</div>
</body>
</html>

上图片：

需要注意导包：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery-2.1.0.js"></script>