今回は、Onsen UI + JavaScriptのみで買い物リストを作ります。
機能としては、買い物リストの新規登録・編集・削除、ons-list-itemの追加・編集・削除を重点においていますので、再起動すると買い物リストは消えてしまいます。
買い物リストの保存については、次回に紹介する予定です。

Monacaデバッガーの結果です。
買い物リスト画面の右下の(+)ボタンをタップすると、商品名入力画面が表示されます。

商品名を入力後、右上の保存ボタンをタップすると、買い物リストに入力した商品名が追加されます。

買い物リストの商品名をタップすると、編集するか削除するかダイアログが表示されます。
編集を選択すると、商品入力画面に商品名が渡されます。
削除を選択すると、商品リストより商品名が削除されます。

Recommended Posts