2014年10月17日 星期五

ionic 實作(8):歷史訂購(下)

說明
歷史訂購功能,主要是用來查看過去的訂購記錄,在這個部份會有master - Detail 的作法在裡面,接下來要介紹的是detail 的部份如何實作。





UI 畫面

設計的畫面如下
打開 tab-history-detail.html 修改內容如下,這次直接在撰寫 AngularJS,所以一樣使用 ng-repeat 來做 order_list 清單的呈現




畫面如下,當然選擇歷史訂購主檔後,才會進到消費明細表


點選單筆資料,在歷史訂購的URI會從  tab/history 變成 tab/history/{id}

Controller 撰寫

接著修改controller,從 js/app.js 的function 中可以看到本月消費的tab-historyDetail.html 對應的controller為 HistoryDetailCtrl



最後接著我們再修改 HistoryDetailCtrl 中,新增一個 order_list 的陣列

大功告成,之後在取得歷史訂購會在介紹到$http時會再refactor

沒有留言:

張貼留言