angularjs实现购物车

谁践踏了优雅 2022-06-07 13:13 270阅读 0赞

**案例: 实现购物车功能**

![Center][]

![Center 1][]

![Center 2][]

要求：技术要求（html+css+angularjs）

1.  完成页面布局，如图1.1（button按钮可以用普通按钮）（页面布局合理、代码无误）

2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条

3.  用ng-repaet指令将对象遍历并渲染到页面中

4.Ø点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物 车总价。同理，当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。在输入框中手动输入数量值，商品小计和购物 车总价动态改变

5. 使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”。

6. 当商品数量为1，用户点击”-”操作时，弹出对话框，询问用户是否删除该商品。如图1.2 当用户点击”确认”时删除该条商品信息，当用户点击”取消”时 商品恢复原来数量。

7. 用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除， 若购物车商品被全部删除后，展示如图1.3

8. 关键代码有注释，项目名：MyShopping+名字拼音\+日期

**源码：**

<!doctype html>
    <html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>购物车</title>
        <style>
            table{
                width: 1000px;
                height: 0px;
            }
            tr{
                height: 50px;
            }
        </style>
        <script src="jquery.1.12.4.js"></script>
        <script src="angular-1.3.0.js"></script>
    
    
        <script>
            var A=angular.module('myApp',[]);
            //购物车 加 A.directive('myAdds',function(){
                return {
                    link:function(scope, element, attr){
                        element.click(function(){
                            var This=this angular.forEach(scope.dataList,function(data,index,array){
                                if(attr.items==data.items){
                                    data.num=parseInt(data.num)+1;
                                    scope.allPrices();
                                    scope.$apply() //刷新视图 }
    
                            });
                        });
                    }
                }
            })
            //购物车 减 A.directive('myMinus',function(){
                return {
                    link:function(scope, element, attr){
                        element.click(function(){
                            var This=this angular.forEach(scope.dataList,function(data,index,array){
    
                                if(attr.items==data.items){
    
                                    if(data.num<=1){
    
                                        if(confirm('是否删除该产品')){
                                            data.num=0;
                                            $(This).siblings('input').val(0);
                                            scope.allPrices();
                                            scope.$apply();
    //delete array[index]; scope.dataList.splice(index,1)
                                            $(This).parents('tr').remove();
                                        }
    
                                    }else{
                                        data.num=parseInt(data.num)-1;
                                    };
    
                                    scope.allPrices();
                                    scope.$apply();
                                }
                            });
                        });
                    }
                }
            })
            //全选，全不选 A.directive('allOrcan',function(){
                return function(scope, element, attr){
                    element.click(function(){
                        var isCheck=$(this).find('input').prop('checked');
                        if(isCheck){
                            $('input[type=checkbox]').prop('checked',true);
                        }else{
                            $('input[type=checkbox]').not($('input[type=checkbox]').eq(0)).prop('checked',false);
                        }
                        angular.forEach(scope.dataList,function(data,index,array){
                            data.Bol=isCheck;
                        })
                        scope.allPrices();
                        scope.$apply();
                    })
                }
            })
            //单选 A.directive('oneCheck',function(){
                return function(scope, element, attr){
                    element.click(function(){
                        var This=this angular.forEach(scope.dataList,function(data,index,array){
                            if(attr.items==data.items){
                                var isCheck=$(This).prop('checked');
                                data.Bol=isCheck;
                                scope.allPrices();
                                scope.$apply();
                            }
                        })
                    });
                }
            })
    
    
    
    
    
    
            A.controller('myAngular',['$scope','$filter',function($scope,$filter){
                $scope.dataList=[//初始化购物车的数据 {
      Bol:'false',name:'洗衣机',num:'1',items:'0',oneprice:'900',price:''},
                    {
      Bol:'false',name:'热水器',num:'1',items:'1',oneprice:'110',price:''},
                    {
      Bol:'false',name:'空调',num:'1',items:'2',oneprice:'116',price:''},
                    {
      Bol:'false',name:'冰箱',num:'1',items:'3',oneprice:'2087',price:''},
                    {
      Bol:'false',name:'电磁炉',num:'1',items:'4',oneprice:'135',price:''},
                    {
      Bol:'false',name:'被子',num:'1',items:'5',oneprice:'50',price:''},
                    {
      Bol:'false',name:'本子',num:'1',items:'6',oneprice:'2',price:''},
                    {
      Bol:'false',name:'笔',num:'1',items:'7',oneprice:'115',price:''},
                    {
      Bol:'false',name:'杯子',num:'1',items:'8',oneprice:'12',price:''},
                    {
      Bol:'false',name:'书',num:'1',items:'9',oneprice:'5',price:''},
                    {
      Bol:'false',name:'零食',num:'1',items:'10',oneprice:'13',price:''}
                ];
    //总价格的计算 $scope.allPrices=function(){
                    $scope.allprice=0;
                    angular.forEach($scope.dataList,function(data,index,array){
    
                        for(var i = 0 ; i <$scope.dataList.length;i++ ){
                            data.price=data.num*data.oneprice;
                        }
                        $scope.allprice+=parseInt(data.price);
                    })
    
    
                    return $scope.allprice;
                };
    
    //按单价排序 $scope.CartSort=function(arg){
                    angular.forEach($scope.dataList,function(data,index,array){
                        arguments.callee['CartSort('+arg+')']=!arguments.callee['CartSort('+arg+')']
                        $scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['CartSort('+arg+')'])
                    })
    
                }
    
                $scope.remove = function(index){
                    if(confirm("你是否将商品移出购物车？")){
                            $scope.dataList.splice(index,1)
                    }
    
                }
                //清空购物车 $scope.removeAll=function(){
                    if(confirm('确定清空购物车')){
                        $scope.dataList=[];
    
                    }
                }
            }])
        </script>
    </head>
    <body ng-controller="myAngular">
    <hr>
    <h1>我的购物车</h1>
    <button class="btn btn-warning "ng-click="removeAll()" style="background: firebrick">清空购物车</button>
    <table border="1" cellspacing="0" style="text-align: center;">
        <tr>
            <td><label all-orcan><input type="checkbox"></label></td>
            <td>name</td>
            <td ng-click='CartSort("oneprice")'>price</td>
            <td>number</td>
            <td>totalPrice</td>
            <td>option</td>
        </tr>
        <tr ng-repeat="data in dataList">
            <td><input type="checkbox" one-check items={ { data.items}}></td>
            <td ng-cloak>{
      {
      data.name}}</td>
            <td ng-cloak>{
      {
      data.oneprice| currency: "￥"}}</td>
            <td><button my-minus items="{ { data.items}}" ng-class="{ cursors:true}" >-</button><input type="text" ng-cloak ng-model="data.num" items="{ { data.items}}" style="width:50px;text-align:center;"> <button my-adds items="{ { data.items}}" ng-class="{ cursors:true}" >+</button> </td>
            <td ng-cloak>{
      {
      data.price| currency: "￥"}}</td>
            <td><button ng-click="remove($index)">删除</button></td>
        </tr>
        <tr>
            <td colspan="6">
                <div style="text-align: left">总价格：{
      {
      allPrices()| currency: "￥"}}</div>
            </td>
        </tr>
    </table>
    </body>
    </html>

[Center]: /images/20220607/6d7b6f6437974776bebbcc47151102f1.png
[Center 1]: /images/20220607/a114e20c316d4cad94829a82af80f3c4.png
[Center 2]: /images/20220607/1686be444b9647f1897a4c20882fe1e7.png