iT邦幫忙

DAY 25
1

開發 Mobile 手機的新一代霸主-ionic framework系列 第 25

ionic 實作(14): Master Detail Pattern

  • 分享至 

  • xImage
  •  

master-detail 的功能在手機裡幾乎是一定會使用到的,在前面的部份我們也有實作到master-detail,所以本章就好好介紹 ionic 的 master-detail 應該是如何設計

在使用 master-detail 時,必須藉用 angularJS中的 $routeParams 或 stateParams 來傳遞參數

舉例說明

例如: 左邊為master,右邊為detail,當點選 2014/10 時,要將 2014/10 的所有訂購的明細叫出來,這個時侯就必須是藉由 $routeParams 的變數來傳遞

要注意routes中的設定,在歷史明細的url 為/history/:month,也就是在controller中要透過 $stateParams[‘month’] 來接變數

url : /history/1 在controller中使用$stateParams[‘month’]就可以知道值為1

在controller 中的表現如下

最後,拿到params通常是用來找出detail,以下是透過$http.post的方式來找出明細

大功告成,master-detail pattern 的設計大致上是如此,以下是 ionic Master Detail Pattern 的文章,寫的非常詳細,有興趣的可以參考

http://mcgivery.com/ionic-master-detail-pattern/


上一篇
ionic 實作(13): ionic 中封裝 angular的 directive
下一篇
ionic 實作(15): ionic Loading
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言