読者です 読者をやめる 読者になる 読者になる

The sky is the limit

ハイブリッドアプリ開発、人工知能(機械学習など)に関する備忘録 たまに宇宙のことも語る【AngularJS、Monaca、Cordova、OnsenUI】

【OnsenUI ver.2】動的なリスト(ng-repeat)を作成して、詳細画面へ値を渡す【AngularJS】

【OnsenUI】動的なリストを作成して、詳細画面へ値やオブジェクトを渡す【AngularJS】

f:id:duo-taro100:20160218004611p:plain


【OnsenUI】動的なリストを作成して、詳細画面へ値やオブジェクトを渡す【AngularJS】

以前こんな記事を書いて、そのまま放置していた。

it-innovation.hatenablog.com

今回は、実装の本題に入る。

今回使うのは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の書き方や、遷移先画面での呼び出し方が違う。
それは次回。