說明
歷史訂購功能,主要是用來查看過去的訂購記錄,在這個部份會有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
沒有留言:
張貼留言