Ionic 常用組件解析
$ionicModal(彈出窗口):
//創建一個窗口
//此處注意目錄的起始位置為app
$ionicModal.fromTemplateUrl('app/security/model/regist-model.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
//緩存創建的窗口
$scope.registModal = modal;
});
$scope.showRegist = function(){
$scope.registModal.show();
};
$scope.hideDialog = function() {
//隱藏
$scope.registModal.hide();
//移除
//$scope.registModal.remove();
};
$ionicLoading (loading ,可以作為信息提示)
//是否不添加全屏遮罩效果 //自動消失時間
$ionicLoading.show({template:'提示信息', noBackdrop: true, duration: 1500});
$ionicPopup (彈出一個小窗口 輸入框,確認框,提示框)
//1.創建一個自定義輸入框
$scope.showPopup = function() {
$scope.data = {}
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [{
text: 'Cancel'
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
}]
});
//輸入后的處理
myPopup.then(function(res) {
console.log('Tapped!', res);
});
//自動消失時間
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 3000);
};
//2.普通輸入框
$scope.showPopup = function() {
$ionicPopup.prompt({
title: 'Password Check',
template: 'Enter your secret password',
inputType: 'password',
inputPlaceholder: 'Your password',
okText:'OK'
}).then(function(res) {
console.log('Your password is', res);
});
}
//3.確認框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
//確認
if(res) {
console.log('You are sure');
} else {//取消
console.log('You are not sure');
}
});
};
//4.提示框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
//確認后的操作
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
$ionicPopover (彈出一個帶箭頭的小對話框)
注意調用方法時不要漏掉 $event 參數
<p>
<button ng-click="openPopover($event)">Open Popover</button>
</p>
//方法一 直接自定義
var template = '<ion-popover-view>' +
'<ion-header-bar>' +
'<h1 class="title">My Popover Title</h1>' +
'</ion-header-bar>'+
'<ion-content> Hello! </ion-content>'+
'</ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
//方法二 引用已存在的html
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//擁有的相關事件
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hidden popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
ionc-list (列表的使用,包括添加按鈕,刪除等)
ionc-list(基本列表創建)
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
ion-delete-button,ion-reorder-button (delete按鈕顯示在左方,reorder按鈕顯示在右方)
<!--
show-delete :控制是否顯示刪除按鈕
show-reorder:控制是否顯示reorder按鈕
-->
<ion-list show-delete="isShowDelete" show-reorder="isShowEdit" class="my-divider-list">
<ion-item ng-repeat="studyItem in data.studyData">
<div class="item item-divider">
<span class="expect-label">學習內容:</span> <span class="expect-desc">{{studyItem.title}}</span>
</div>
<a class="item" >
<span class="expect-label">日期:</span> <span class="expect-desc">{{studyItem.date|date:'yyyy-M-dd'}}</span>
</a>
<a class="item" >
<span class="expect-label">學習明細:</span> <span class="expect-desc">{{studyItem.desc}}</span>
</a>
<!--
添加刪除按鈕
-->
<ion-delete-button class="ion-minus-circled" ng-click="deleteStudy(studyItem)">
</ion-delete-button>
<!--
添加reorder 按鈕
-->
<ion-reorder-button class="ion-edit" ng-click="showEditStudyDialog(studyItem, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
ion-option-button
<!-- can-swipe="true" 添加該屬性才能開啟滑動附加按鈕-->
<ion-list can-swipe="true">
<ion-item ng-repeat="costItem in data.costData">
<div><span class="expect-label">支出金額:</span> <span class="expect-desc">{{costItem.money}}</span></div>
<div><span class="expect-label">支出日期:</span> <span class="expect-desc">{{costItem.date|date:'yyyy-M-dd'}}</span></div>
<div><span class="expect-label">支出明細:</span> <span class="expect-desc">{{costItem.desc}}</span></div>
<!--添加滑動按鈕-->
<ion-option-button class="button-info"
ng-click="showEditCost(costItem)">
修改
</ion-option-button>
<ion-option-button class="button-assertive"
ng-click="deleteCost(costItem)">
刪除
</ion-option-button>
</ion-item>
</ion-list>
//該方法可以關閉已經顯示的按鈕
$ionicListDelegate.closeOptionButtons()
ion-slide-box (滑動卡組件)
<!--
active-slide:初始index
show-pager:是否顯示下方滑動按鈕
on-slide-changed:滑動事件
<ion-slide>滑動的內容
-->
<ion-slide-box active-slide="activeSlideIndex" show-pager="true" on-slide-changed = "productSlideChanged($index)">
<ion-slide ng-repeat="item in data.picTPLdata" >
<div class="list card">
<div class="item">
<h2>{{item.desc1}} <span style ="color: gray;">{{item.desc0}}</span></h2>
</div>
<div class="item item-image">
<img src="{{item.url}}">
</div>
</div>
</ion-slide>
</ion-slide-box>
ion-refresher (下拉刷新數據)
<ion-refresher pulling-text="刷新數據中.." on-refresh="doRefresh()">
</ion-refresher>
$scope.doRefresh = function() {
FGOService.getNoteData()
.then(function(result){
$scope.data.noteData = result;
//關閉刷新提示
$scope.$broadcast('scroll.refreshComplete');
})
};