iT邦幫忙

DAY 16
0

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

ionic 實作(5):今日訂餐

  • 分享至 

  • xImage
  •  

說明

今日訂餐功能,主要是要顯示今天中午要訂購的便當店,所以在設計上要有 title 、圖片及menu(菜單)三個部份。

UI 畫面

設計的畫面如下

這邊使用 list card 來排版,程式內容如下

畫面排版可以參考 http://ionicframework.com/docs/components/#card-showcase

清單的部份可以參考 http://ionicframework.com/docs/components/#item-icons

Controller 撰寫

今日訂餐的tab-order.html 對應的controller為 OrderCtrl

打開js/controller.js ,找到 OrderCtrl 的 function 修改如下

我們試著將商家名稱、電話及清單修改為如下

試著再打開 tab-order.html 修改如下

大功告成,之後在取得今日訂餐會在介紹到$http時會再refactor


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

1 則留言

0
lulubear
iT邦新手 5 級 ‧ 2014-10-16 12:16:43

好認真

我要留言

立即登入留言