AngulaJs订单管理页面

最新推荐文章于 2022-04-23 18:51:39 发布

原创最新推荐文章于 2022-04-23 18:51:39 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的订单管理系统示例。该系统能够显示订单列表，包括订单编号、卖家信息、商品详情等，并提供了单个订单删除及批量删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上部分

    <!DOCTYPE html> 
    <html ng-app="lesson" ng-controller="lesson2" >
    <head>
        <meta charset ="UTF-8"> 
        <title>Document</title>
    </head>
    <body>
        <p ng-show="IsLoading">订单加载中...</p>
        <div ng-show="!IsLoading">
            <table>
                <tr>
                    <td>订单编号</td>
                    <td>卖家</td>
                    <td>商品详情</td>
                    <td>订单总价</td>
                    <td>物流状态</td>
                    <td>下单状态</td>
                    <td>下单日期</td>
                </tr>
                <tr ng-repeat="x in orderList">
                    <td>{{x.orderId}}</td>
                    <td>{{x.sealer}}</td>
                    <td>
                        <ul ng-repeat="p in x.products">
                            <li>{{p.name}}</li>
                            <li>{{p.desciption}}</li>   
                            <li>{{p.price}}</li>
                            <li>{{p.oldPrice}}</li>
                            <li>{{p.amount}}</li>
                            <li>{{p.payment}}</li>
                        </ul>
                    </td>
                    <td>{{x.orderPayment}}</td>
                    <td>{{x.traffic}}</td>
                    <td>{{x.status}}</td>
                    <td>{{x.createTime}}</td>
                </tr>

            </table>
        </div>

        <script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
        <script type="text/javascript">
        var app=angular.module("lesson",[]);
        app.controller("lesson2",function($scope){
            $scope.orderListBase=[
            {
            orderId:'GT001',
            createTime:'2014-10-10 10:10',
            sealer:'小名',
            traffic:'快递已取件',
            status:'卖家已经发货',
            products:[
                {
                name:'衣服',
                desciption:'很帅',
                price:200.00,
                oldPrice:250.00,
                amount:1,
                payment:200.00
                }
            ],
            orderPayment:200.00
            },
            {
            orderId:'GT002',
            createTime:'2014-10-12 10:10',
            sealer:'哈哈',
            traffic:'快递已取件',
            status:'卖家已经发货',
            products:[
                {
                name:'裤子',
                desciption:'很帅',
                price:100.00,
                oldPrice:250.00,
                amount:1,
                payment:100.00
                },
                {
                name:'棒球帽',
                desciption:'宽檐',
                price:60.00,
                oldPrice:160.00,
                amount:1,
                payment:60.00
                }
            ],
            orderPayment:160.00
            },
            {
            orderId:'GT003',
            createTime:'2014-10-15 10:10',
            sealer:'小名哈',
            traffic:'快递已取件',
            status:'卖家已经发货',
            products:[
                {
                name:'头柜',
                desciption:'很帅',
                price:200.00,
                oldPrice:250.00,
                amount:1,
                payment:200.00
                }
            ],
            orderPayment:200.00
            }
            ];

        $scope.orderList=[];
        $scope.IsLoading=false;
        $scope.LoadOrderList=function(accountId,pageSize,pageIndex){
            $scope.IsLoading=true;
            $scope.orderList=$scope.orderListBase;
            $scope.IsLoading=false;
        }

        $scope.LoadOrderList();
        });     



        </script>
    </body>
    </html>

下部分(删除,批量删除)

    <!DOCTYPE html> 
    <html ng-app="lesson" ng-controller="lesson2" >
    <head>
        <meta charset ="UTF-8"> 
        <title>Document</title>
    </head>
    <body>
        <p ng-show="IsLoading">订单加载中...</p>
        <div ng-show="!IsLoading">
            <div>
                <button ng-click="DeleteOrders()">批量删除</button>
            </div>
            <table>
                <tr >
                    <td>选中</td>
                    <td>订单编号</td>
                    <td>卖家</td>
                    <td>商品详情</td>
                    <td>订单总价</td>
                    <td>物流状态</td>
                    <td>下单状态</td>
                    <td>下单日期</td>
                    <td>删除</td>
                </tr>
                <tr ng-repeat="x in orderList">
                    <td>
                        <input type="checkbox" ng-model="x.selected"></td>
                    <td>{{x.orderId}}</td>
                    <td>{{x.sealer}}</td>
                    <td>
                        <ul ng-repeat="p in x.products">
                            <li>{{p.name}}</li>
                            <li>{{p.desciption}}</li>
                            <li>{{p.price}}</li>
                            <li>{{p.oldPrice}}</li>
                            <li>{{p.amount}}</li>
                            <li>{{p.payment}}</li>
                        </ul>
                    </td>
                    <td>{{x.orderPayment}}</td>
                    <td>{{x.traffic}}</td>
                    <td>{{x.status}}</td>
                    <td>{{x.createTime}}</td>
                    <td>
                        <button ng-click="DeleteOrder(x.orderId)">删除</button>
                    </td>
                </tr>

            </table>
        </div>

        <script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
        <script type="text/javascript">
        Array.prototype.remove=function(dx)
　{
　　if(isNaN(dx)||dx>this.length){return false;}
　　for(var i=0,n=0;i<this.length;i++)
　　{
　　　　if(this[i]!=this[dx])
　　　　{
　　　　　　this[n++]=this[i]
　　　　}
　　}
　　this.length-=1
　}




        var app=angular.module("lesson",[]);
        app.controller("lesson2",function($scope){
            $scope.orderListBase=[
            {
            orderId:'GT001',
            createTime:'2014-10-10 10:10',
            sealer:'小名',
            traffic:'快递已取件',
            status:'卖家已经发货',
            products:[
                {
                name:'衣服',
                desciption:'很帅',
                price:200.00,
                oldPrice:250.00,
                amount:1,
                payment:200.00
                }
            ],
            orderPayment:200.00,
            selected:false
            },
            {
            orderId:'GT002',
            createTime:'2014-10-12 10:10',
            sealer:'哈哈',
            traffic:'快递已取件',
            status:'卖家已经发货',
            products:[
                {
                name:'裤子',
                desciption:'很帅',
                price:100.00,
                oldPrice:250.00,
                amount:1,
                payment:100.00
                },
                {
                name:'棒球帽',
                desciption:'宽檐',
                price:60.00,
                oldPrice:160.00,
                amount:1,
                payment:60.00
                }
            ],
            orderPayment:160.00,
            selected:false
            },
            {
            orderId:'GT003',
            createTime:'2014-10-15 10:10',
            sealer:'小名哈',
            traffic:'快递已取件',
            status:'卖家已经发货',
            products:[
                {
                name:'头柜',
                desciption:'很帅',
                price:200.00,
                oldPrice:250.00,
                amount:1,
                payment:200.00
                }
            ],
            orderPayment:200.00,
            selected:false
            }
            ];

        $scope.orderList=[];
        $scope.IsLoading=false;
        $scope.LoadOrderList=function(accountId,pageSize,pageIndex){
            $scope.IsLoading=true;
            $scope.orderList=$scope.orderListBase;
            $scope.IsLoading=false;
        }

        $scope.DeleteOrder=function(orderId){
            $scope.orderList.forEach(function(u,i,list){
                if(u.orderId==orderId){
                    list.splice(i,1)
                }
            })
        }
        $scope.DeleteOrders=function(){
            for(var i=$scope.orderList.length-1;i>=0;i--){
                if($scope.orderList[i].selected){
                    $scope.orderList.remove(i)
                }
            }
        }
        $scope.LoadOrderList();
        });     


        </script>
    </body>
    </html>