场景下开发-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>

时间: 2024-11-05 18:45:07

场景下开发-angular 高级组件-显示更多列表的相关文章

场景下开发-angular 高级组件(自定义)-显示更多

//  假如拿到数据少于3条,就只显示数据, //多于三条,显示更多标记,点击更多显示全部, //点击收起,回复到第二种状态 code1 <div ng-if="!reOver" ng-click="ticMore('More')"></div> <div ng-if="tkmore && isOver" ng-click="ticMore('More')"> <div

场景下开发-angular 图片缓存服务2.0

改变:合二为一 function(data,status){ imageCache2.getPic(data.imageid, AmApp.config.Merchant).then(function(result){ $scope.merchantDt.imageid = result; }) imageCache2.getPicList(data["ticketlist"],"imageid",AmApp.config.Merchant) .then(funct

【Android开发】高级组件-自动完成文本框

自动完成文本框(AutoCompleteTextView),用于实现允许用户输入一定字符后,显示一个下拉菜单,供用户从中选择,当用户选择某个选项之后,按用户选择自动填写该文本框. 语法格式: 属性列表>AutoCompleteTextView组件继承EditText,所以它支持EditText组件提供的属性,同时,该组件还有以下属性: android:completion http://songtaste.com/user/10347564/infohttp://songtaste.com/us

【Android开发】高级组件-进度条

当一个应用在后台执行时,前台界面不会有任何信息,这是用户根本不知道程序是否在执行以及执行进度等,因此需要使用进度条来提示程序执行的进度.在Android中,进度条(ProgressBar)用于向用户显示某个耗时操作完成的百分比. 在屏幕中添加进度天,可以在XML布局文件中通过标记添加,基本语法格式如下:    属性列表 > ProgressBar组件支持的XML属性如下所... http://songtaste.com/user/10310357/infohttp://songtaste.com

场景下开发-企业注册用户信息修改流程

场景是企业用户注册完后,想更改企业信息 1.企业客户申请流程2.客户审核流程企业信息保存,银行卡信息保存,提交审核(待提交,审核中,审核失败,审核成功)判断 OpenUpdateFlag 3.更新图片根据主键更新 4.企业账户信息修改流程 修改申请()if(审核中,审核失败){OpenUpdateFlag ==='2'}else{    OpenUpdateFlag ==='1'}if(OpenUpdateFlag ==='1'){    企业信息保存,银行卡信息保存(待提交)    1.带有原

场景下开发-angular-directive

.directive('expander', function() { /* expander() restrict: E,A,C,M(元素,属性,样式,注释) transclude:true替换 compile(编译)和link(连接) <expander class='expander' expander-title='title'></expander> */ var scope ={title : '=expanderTitle'}; var template = '<

微信小程序之下拉刷新,上拉更多列表实现

代码地址如下:<br>http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 目录结构说明 二.程序实现 1.运行开发工具 选择「本地小程序项目」 2.新建项目 3.开启接口域名免校验 4.运行效果 三.功能说明 1.通过page方式实现下拉刷新,上拉更多列表 onPullDownRef

【Vue】浅谈Vue不同场景下组件间的数据交流

浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——pro

在Delphi下使用迅雷APlayer组件进行免注册开发

之前都是用的delphi下的dspack进行的视频开发,这个组件其实很好用,就是找解码器麻烦点,而且还得在客户的计算机上使用RegSvr32.exe也注册解码器,要不有可能播放不了. 结果在查找合适的解码器过程中,无意搜索到了迅雷的APlayer组件. 迅雷APlayer这个组件提供了一个完整的解码器合集(核心的流媒体播放技术也是DirectShow和dspack一样一样的),下载APlayer的解码器合集并注册到系统后,确实在dspack也用的挺好,不过看了APlayer的介绍后发现人家做的更