场景下开发-angular 高级组件-显示更多列表

 

 

code1

.factory('commonfn',function($state,$ionicHistory,$ionicScrollDelegate,
        $cordovaToast,$rootScope,$ionicPopup){
//    commonfn.init($scope)
    return{
        init: function($scope){
//            安卓手机的返回键
            $scope.showOutConfirm = function(){

                if (typeof ($cordovaToast) == 'object') {
                    if (!$rootScope.canExit) {
                        $cordovaToast
                                .showWithOptions({
                                    message : "再点一次退出程序",
                                    duration : 2000,
                                    position : "bottom",
                                    addPixelsY : -300
                                });
                        $rootScope.canExit = true;
                        $timeout(
                                function() {
                                    $rootScope.canExit = false;
                                }, 3000);
                    } else {
                        $rootScope.canExit = false;
                        ionic.Platform
                                .exitApp();
                    }
                } else {
                    var confirmPopup = $ionicPopup
                            .confirm({
                                template : '你确定要退出应用吗?',
                                okText : '退出',
                                cancelText : '取消',
                                okType : 'button-confirm',
                                cancelType : 'button-cancel',
                                cssClass : 'custom_popup'
                            });

                    confirmPopup
                            .then(function(
                                    res) {
                                if (res) {
                                    ionic.Platform
                                            .exitApp();
                                } else {
                                    // Don't
                                    // close
                                }
                            });
                }
            
            }
            
//            去往某个页面
            $scope.changeState = function(name, params){$state.go(name, params);}
            $scope.goBack = function() {history.back();}
            $scope.goStateWithNoAnim = function(stateName, params) {
                $ionicHistory.nextViewOptions({
                    disableAnimate : true
                });
                $state.go(stateName, params);
                
            }
//            下拉显示
            $scope.more = function(arrList,type,flag,num){
                var num =(num)?num:3;
                var arr =[];
                switch(type){
                    case'loadlist':
                        arr = arrList.slice(0,num);
                        flag = !flag;
                        break;
                    case'PackUp':
                        arr  = arrList.slice(0,num);
                        flag = !flag;
                        $ionicScrollDelegate.resize();
                        break;
                    case'More':
                        arr = arrList;
                        flag = !flag;
                        $ionicScrollDelegate.resize();
                        break;
                    default:
                        break;
                
                }
                return arr;
            }
            
        },
        
        
    }
})

code2

.controller('Demo6Controller',function($scope, $state, $stateParams, $http, 
                $ionicLoading, $ionicScrollDelegate,
                basePage, imageCache, imageListCache,commonfn){
            commonfn.init($scope);
            $scope.merchantid = $stateParams.merchantid;
            // 请求商户详情
            $scope.merchantDt = {
                name : '',
                type : '',
                address : '',
                telnum : '',
                ticketNum: '100',
                cardNum : '100',
                tkmore : true,
                cdmore : true
            }
            
            $scope.queryTk = function(){
                // 待销售电子券列表请求
                runServiceWithSession(
                        $http,
                        $ionicLoading,
                        $state,
                        'member.ticket.querymerticketlist',
                        {
                            merchantid : $scope.merchantid,
                            maxcount : $scope.merchantDt.ticketNum
                        },
                        function(data, status) {
                            imageListCache
                                    .dealImageList(data["ticketlist"],
                                            "imageid",
                                            AmApp.config.Merchant)
                                    .then(
                                            function() {
                                                
                                                $scope.tcMore = function(type){
                                                    switch(type){
                                                    case'loadlist':
                                                        $scope.ticketlist = 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$scope.more(data.ticketlist,"loadlist");
                                                        $scope.tkOverThree= true;
                                                        break;
                                                    case'PackUp':
                                                        $scope.ticketlist = 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$scope.more(data.ticketlist,"PackUp");

                                                        $scope.merchantDt.tkmore = true;
                                                        break;
                                                    case'More':
                                                        $scope.ticketlist = $scope.more(data.ticketlist,"More");
                                                        $scope.merchantDt.tkmore = false;
                                                        break;
                                                }
                                                }
                                                $scope.tkOverThree = false;
                                                $scope.tcMore('loadlist');

                                            })
                        });

            }
            
            $scope.queryCd = function(){
                // 待销售预付卡列表请求
                runServiceWithSession(
                        $http,
                        $ionicLoading,
                        $state,
                        'member.prepaidcard.querymerlist',
                        {
                            merchantid : $scope.merchantid,
                            maxcount : $scope.merchantDt.cardNum
                        },
                        function(data, status) {
                            imageListCache
                                    .dealImageList(data["cardlist"],
                                            "imageid",
                                            AmApp.config.Merchant)
                                    .then(
                                            function() {
                                                if (data["cardlist"].length > 0) {
                                                    for (var k = 0; k < data["cardlist"].length; k++) {
                                                        data["cardlist"][k].radio = 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 data["cardlist"][k].radio * 10;

                                                    }
                                                }
                                                
                                                $scope.cMore = function(type){
                                                    switch(type){
                                                    case'loadlist':
                                                        $scope.cardlist = $scope.more(data.cardlist,"loadlist");
                                                        $scope.cdOverThree= true;
                                                        break;
                                                    case'PackUp':
                                                        $scope.cardlist = $scope.more(data.cardlist,"PackUp");
                                                        $scope.merchantDt.cdmore = true;
                                                        break;
                                                    case'More':
                                                        $scope.cardlist = $scope.more(data.cardlist,"More");
                                                        $scope.merchantDt.cdmore = false;
                                                        break;
                                                }
                                                }
                                                                                                
                                                $scope.cdOverThree = false;
                                                $scope.cMore('loadlist');
                                            })
                        });
            }    
            var loadData = function() {
                $scope.queryTk();
                $scope.queryCd();
            };                                
            basePage.init($scope, loadData);
        })
        

 

 

code3

<div class="m_t_10" ng-if="ticketlist">
    <div class="row">
        <div class="col-50 p_5 dianzi-image pading_left_15">电子券</div>
        <div class="col-50 font_norm text_r p_5" style="display:none">
            <span ng-click="tkAll()">查看全部</span>
        </div>
    </div>
    <div class="menu_list">
        <div ng-click="ticketBuy(ticket.ticketbatchid)"
            ng-repeat="ticket in ticketlist">
            <div class="menu_item">
                <label class="col-30 p_5"> <img class="br_6"
                    src="{{ticket.imageid}}" width=100% />
                </label>
                <div class="col-40 p_t_b_10 align_c">
                    <div class="row">
                        <div class="over_hidden">{{ticket.ticketshortname}}</div>
                    </div>
                    <div class="row">
                        <div class="font_red over_hidden">￥{{ticket.ticketactprice}}元</div>
                        <div class="font_a m_l_5 text_line_through over_hidden">￥{{ticket.ticketprice}}元</div>
                    </div>
                </div>
                <span class="col-30 arrow_menu font_a align_c over_hidden font_s_2">已售{{ticket.ticketnumber-ticket.salenumber}}张</span>
            </div>
        </div>
        <div ng-click="tcMore('More')" ng-show="merchantDt.tkmore && tkOverThree">
          <div class="menu_item border_b_0">
             <label class="col-55 text_r ">更多</label>
             <span class="col-5 all_arrow_down"></span>
          </div>
        </div>
        <div ng-click="tcMore('PackUp')" ng-show="!merchantDt.tkmore && tkOverThree">
          <div class="menu_item">
             <label class="col-55 text_r ">收起</label>
             <span class="col-5 all_arrow_up"></span>
          </div>
        </div>
    </div>
</div>