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