webApp开发-tab页列表显示

 

html

<!-- $scope.tab =[全部，待发货，待收货，已完成] -->    

<ul class="row bg_fff" id="order_tab">
    <li class="item col-25  "  ng-repeat="item in tab" ng-click="queryOrder($index)">
        <span  ng-class="slectIndex==$index ? 'active' : ''">{{item}}</span>
    </li>
</ul>

 

controller

.controller('Demo7Controller',function($scope, $state, $http, 
                $ionicLoading,     $ionicScrollDelegate,
                imageListCache, amarKeyBoard, basePage,paging){

            $scope.footActiveIndex = 1;
            $scope.noData = false;
            var iPageSize = 10;
            $scope.bill = {
                    pagesize : iPageSize,
                };
            
            $scope.billCP = {
                    ticketnumber : '',                                        
                    ticketname : '',
                    merchantname : ''    
            }
//            全部，待发货，待收货，已完成
            $scope.tab =['全部','待发货','待收货','已完成'];
            
            var loadData = function() {
                runServiceWithSession(
                        $http,
                        undefined,
                        $state,
                        'member.ticket.ticketexpresslist',
                        {
                            pagesize : $scope.bill.pagesize,
                            pageno : $scope.pageNo

                        },
                        function(data, status) {
                            
                            
                            if (data.orderlist.length) {
                                $scope.noData = false;
                            } else {
                                $scope.noData = true;
                                $scope.loadingMore = false;
                            }
                            imageListCache
                            .dealImageList(
                                    data["orderlist"],
                                    "imageid",
                                    AmApp.config.Merchant)
                            .then(
                                    function() {
                                        $scope.items=[];//显示
                                        $scope.items0 =[];//全部
                                        $scope.items1 =[];//待发货
                                        $scope.items2 =[];//待收货
                                        $scope.items3 =[];//已完成，可再去消费
                                        
                                        for (var k = 0; k < data["orderlist"].length; k++) {
                                            $scope.items.push(data["orderlist"][k]);
                                            $scope.items0.push(data["orderlist"][k]);
                                            
                                            switch(data.orderlist[k].status){
                                                case'待发货'://waitgo
                                                    $scope.items1.push(data["orderlist"][k]);
                                                    break;
                                                case'待收货'://waitreceive
                                                    $scope.items2.push(data["orderlist"][k]);
                                                    break;
                                                case'已完成'://completed
                                                    $scope.items3.push(data["orderlist"][k]);
                                                    break;
                                            }
                                            
                                        }
                                        console.log('test');
                                        console.log($scope.items1,$scope.items2,$scope.items3);


                                  $scope.hasMore = (($scope.pageNo - 1)
                                                * iPageSize
                                                + data["orderlist"].length < data.totalcnt);
                                        $scope.loadingMore = false;
                                        if ($scope.items.length) {
                                            $scope.noData = false;
                                        } else {
                                            $scope.noData = true;
                                        }                                          
                                        $scope
                                                .$broadcast('scroll.refreshComplete');
                                        $scope
                                                .$broadcast('scroll.infiniteScrollComplete');
                                    });
                            
                        });

            };
//            点击tab 查询订单        
            function noData1(arr){
                if(arr.length>0){$scope.noData = false;}
                else{
                    $scope.noData = true;
                    $scope.loadingMore = false;
                }
            }        
            $scope.slectIndex = 0;
            function queryOrderByIndex(index,str,arr){
                if(index == str){
                    $scope.slectIndex = index;
//                    $scope.items = $scope.items0;
                    $scope.items = arr;
                    noData1($scope.items);
                }
                
            }
            $scope.queryOrder = function (index){
                var type =  $scope.slectIndex = index;
                console.log($scope.slectIndex);
                 queryOrderByIndex(index,"0",$scope.items0);
                 queryOrderByIndex(index,"1",$scope.items1);
                 queryOrderByIndex(index,"2",$scope.items2);
                 queryOrderByIndex(index,"3",$scope.items3)    
            }
            paging.init($scope, iPageSize, 1, loadData);
        
            
        })

 

css

/* 我的订单 tab */
#order_tab{
    /* ng-repeat 一行显示 */
    display:flex;
}
#order_tab li.item{
    line-height: 44px;
    font-size: 0.14rem !important;
    padding:0px;
}
#order_tab li.item  span{
    display:inline-block;
    width:84px;
    height:40px;
    line-height: 40px;
    font-size: 0.14rem !important;
    padding:0px;    
}
#order_tab li.item  span.active{
    border-bottom:2px solid #ef473a;
}