iT邦幫忙

DAY 18
1

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

ionic 實作(7):歷史訂購(上)

  • 分享至 

  • xImage
  •  

說明

歷史訂購功能,主要是用來查看過去的訂購記錄,在這個部份會有master - Detail 的作法在裡面。

UI 畫面

設計的畫面如下

打開 tab-history.html 修改內容如下,在list中先輸入幾筆 item,另外這邊有使用了 inline style 去處理,這個部份在之後refactor的介紹會再做調整

測試出來的畫面如下

Controller 撰寫

接著修改controller,從 js/app.js 的function 中可以看到歷史訂購的tab-history.html 對應的controller為 HistoryCtrl

成功後,我們試著在Controller中去新增一個 history_list 的陣列

接著我們在把剛新增的item方式改成 angular ng-repeat 的寫法

以上完成了歷史訂購的主畫面,接下來我們要讓點選每筆row後,可以查看每次訂購的明細

待續...


上一篇
ionic 實作(6):本月消費
下一篇
ionic 實作(8):歷史訂購(下)
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言