前提・実現したいこと
OnsenUIでツールバーの内容をタブやページ遷移によって動的に変えたいと思っています。
さまざま試しましたが上手くいきません。何か良いアイディアありませんでしょうか。
できればページ毎のidによって表示を変えたいです。
該当のソースコード
html
1<body> 2 <ons-page ng-controller="AppController as app"> 3 <ons-toolbar> 4 <div class="center">My App - {{app.title}}</div> 5 <div class="right" ng-if="app.title == 'Page 1'"><ons-icon icon="cog" size="20px" style="padding-right: 20px;" ></ons-icon></div> 6 <div class="right" ng-if="app.title == 'Page 2'" >検索</div> 7 </ons-toolbar> 8 9 <ons-tabbar position="auto"> 10 <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab> 11 <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab> 12 </ons-tabbar> 13 </ons-page> 14 15 <ons-template id="page1.html"> 16 <ons-page ons-show="app.title = 'Page 1'"> 17 <div class="content" style="text-align: center"> 18 <p>Page 1 content</p> 19 </div> 20 </ons-page> 21 </ons-template> 22 23 <ons-template id="page2.html"> 24 <ons-page ons-show="app.title = 'Page 2'"> 25 <div class="content" style="text-align: center"> 26 <p>Page 2 content</p> 27 </div> 28 </ons-page> 29 </ons-template> 30 31</body>
試したこと
・ng-ifを使用してのページごとの内容の変更。
・ツールバーにid="toolbar"をつけ、document.getElementById("toolbar")を行い、ページid毎にif文によってinnerHTMLを使い内容の変更。
どれもうまくいきませんでした。
動的に変えてらっしゃる方いらっしゃいましたら教えていただけると幸いです。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/28 23:51