お世話になります。
ons-toolbarでページ移行するappを開発中なのですが、
ons-listから詳細ページに移行する際にパラメータを渡したいのですが、
urlにパラメータを付加することは可能でしょうか?
またその際移行先のページでのパラメータの呼び出しはどのようにすれば良いのでしょうか?
urlパラメータが使えない場合はページ移行の際に変数を送る方法はありましたらご教示いただけると幸いです。
よろしくお願いします。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するお世話になります。
ons-toolbarでページ移行するappを開発中なのですが、
ons-listから詳細ページに移行する際にパラメータを渡したいのですが、
urlにパラメータを付加することは可能でしょうか?
またその際移行先のページでのパラメータの呼び出しはどのようにすれば良いのでしょうか?
urlパラメータが使えない場合はページ移行の際に変数を送る方法はありましたらご教示いただけると幸いです。
よろしくお願いします。
URLにパラメータを渡すやり方はうまくいかないと思います。
代わりに、pushPage()
の第二引数にオプションを渡し、目的ページでgetCurrentPage()
を呼んで受け取る方法があります。
ons.bootstrap()
.controller('listController', function($scope){
$scope.items = [
{id: 1, title: 'item1'},
{id: 2, title: 'item2'},
{id: 3, title: 'item3'},
{id: 4, title: 'item4'},
];
})
.controller('detailController', function($scope){
var options = $scope.nav.getCurrentPage().options;
$scope.item = options.item;
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-navigator page="list.html" var="nav"></ons-navigator>
<ons-template id="list.html">
<ons-page ng-controller="listController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">list</div>
</ons-toolbar>
<ons-list>
<ons-list-item ng-repeat="item in items" ng-click="nav.pushPage('detail.html', {item: item})">
{{item.title}}
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page ng-controller="detailController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">{{item.title}}</div>
</ons-toolbar>
</ons-page>
</ons-template>