【Monaca】Ionic Color Pickerっぽい機能を実現する

※Onsen UI + AngularJSを使用。
アプリにカラーピッカーのような機能を実現したいと思っていたところ、
Ionic Color Picker – Ionic Marketplace
というページを見つけ、早速それっぽい機能を実現してみた。

新規プロジェクトから「Onsen UI V2 Angular 1 Minimum」を作成。
$watchCollection()でcolorオブジェクトの変更を検知し、RGBのHEXコードを生成している。


Continue reading

【Monaca】Onsen UI 選択したデータを前画面に渡す

JavaScript + Onsen UI V2版はこちら。

otak-lab
2018.07.15
【Monaca】JavaScript + Onsen UI V2 選択したデータを前画面に渡す
https://otak-lab.com/archives/1482
約2年前に書いた【Monaca】Onsen UI 選択したデータを前画面に渡す記事のJavaScript + Onsen UI V2版。(AngularJS未使用版)Page1で「ここをタップ」をタップし、Page2で「100000」をタップすると、Page1に戻り「100000」と表示される。 問題は選択したデータを前画面に渡す方法。やり方はいろいろあるが、もっとも簡単な方法はグローバル変数に選択したデータを保存する方法。下記コードでは、独自のsetParamメソッドでグローバル変数に選択したデータを保存し、popPageメソッドで前画面に戻り、その途中で発生するons-navigatorのpre...

※Onsen UI + AngularJSを使用。

ons-navigatorのpushPage()、popPage()を利用すれば、次画面に進み、前画面に戻ることが実現できる。
しかし、次画面で選択したデータを前画面に渡す方法は記載がない。
$rootScope.$broadcast()を利用して親コントローラ(page1Controller)にデータを渡し、$scope.$on()で受け取ればよい。

Page1で「ここをタップ」をタップし、Page2で「1000」をタップすると、Page1に戻り「1000」と表示される。
2983291e-9b3c-42cf-b5bc-8094b371f7c9 4c4aee94-6c9d-419f-8ca4-138286fd7463 7693ddf9-229c-4d9f-8b0a-642ccabe47f2
Continue reading

【Monaca】メニューアイコンのバッジをカウントさせる

2016040402

前回、「【Monaca】Onsen UIのツールバーのメニューアイコンにバッジを表示する」にてバッジを表示させたが、今回はバッジのカウント機能を追加してみた。
コード内のコメントに書いたとおり、一つ一つの処理を理解すれば難しいことはない。
メニューのPage1をタップすると、カウントが5から1ずつ減る。
バッジの表示・非表示はng-showで行っており、page1Controller内のmenuCountが0になれば表示されない。
2016041501
2016041502
Continue reading