【OnsenUI】動的なリストを作成して、詳細画面へ値やオブジェクトを渡す【AngularJS】
【OnsenUI】動的なリストを作成して、詳細画面へ値やオブジェクトを渡す【AngularJS】
以前こんな記事を書いて、そのまま放置していた。
今回は、実装の本題に入る。
今回使うのはOnsenUIのnavigatorを使って、画面遷移とデータの受け渡しを行う。
OnsenUIのversionによって実装方法が異なるので、その辺りも詳しく。今回はOnsenUI ver.2での実装について。
■navigatorの定義
＜ons-navigator var="myNavigator" page="list.html"＞
＜/ons-navigator＞
■listの作成(ng-repeat)
＜ons-list＞
＜ons-list-item ng-repeat="account in ctrl.accounts"
ng-click="myNavigator.pushPage('accountDetail.html', {data: {account: account,index: $index}} )"＞
＜span class="accountName">{{account.accountName}}{{account.amount | number}}円pushPage(遷移先ページ, {data : { 変数1: 値1 , 変数2: 値2} } )のようにすれば、遷移先の画面で変数1,変数2が使用できる。
ng-click="myNavigator.pushPage('accountDetail.html', {data: {account: account,index: $index}} )"
ここでは、ng-repeat="account in ctrl.accounts" で定義しているaccountとループ回数を表す$indexをaccountDetail.htmlに渡すことができる。
■遷移先ページでの記述
遷移先の画面では以下のように書くことで、データを使える。
myNavigator.topPage.data. 変数
topPageは現在のページ情報を取得する。
dataはpushPageで定義したdata: {account: account,index: $index}のこと。
例えば、accountオブジェクトにaccountNameやamountというプロパティがある場合は、以下のように書けばいい。
＜p＞口座名：{{myNavigator.topPage.data.account.accountName}}＜/p＞
＜p＞貯蓄額：{{myNavigator.topPage.data.account.amount | number}}円＜/p＞
こんな感じ。結構簡単。
OnsenUI ver.1ではpushPageでにoptionsの書き方や、遷移先画面での呼び出し方が違う。
それは次回。
