質問編集履歴

1 要望の追加

sato1108

sato1108 score 6

2018/05/28 10:35  投稿

ons-toolbar中身のページ遷移による動的変更
### 前提・実現したいこと
OnsenUIでツールバーの内容をタブやページ遷移によって動的に変えたいと思っています。
さまざま試しましたが上手くいきません。何か良いアイディアありませんでしょうか。
できればページ毎のidによって表示を変えたいです。
### 該当のソースコード
```html
<body>
 <ons-page ng-controller="AppController as app">
   <ons-toolbar>
     <div class="center">My App - {{app.title}}</div>
     <div class="right" ng-if="app.title == 'Page 1'"><ons-icon icon="cog" size="20px" style="padding-right: 20px;" ></ons-icon></div>
     <div class="right" ng-if="app.title == 'Page 2'" >検索</div>
   </ons-toolbar>
   <ons-tabbar position="auto">
     <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab>
     <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
   </ons-tabbar>
 </ons-page>
 <ons-template id="page1.html">
   <ons-page ons-show="app.title = 'Page 1'">
     <div class="content" style="text-align: center">
       <p>Page 1 content</p>
     </div>
   </ons-page>
 </ons-template>
 <ons-template id="page2.html">
   <ons-page ons-show="app.title = 'Page 2'">
     <div class="content" style="text-align: center">
       <p>Page 2 content</p>
     </div>
   </ons-page>
 </ons-template>
</body>
```
### 試したこと
・ng-ifを使用してのページごとの内容の変更。
・ツールバーにid="toolbar"をつけ、document.getElementById("toolbar")を行い、ページid毎にif文によってinnerHTMLを使い内容の変更。
どれもうまくいきませんでした。
動的に変えてらっしゃる方いらっしゃいましたら教えていただけると幸いです。
### 補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • CSS

    5306questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • AngularJS

    558questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • HTML5

    3711questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Onsen UI

    314questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る