質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

AngularJS

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

CSS

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

Onsen UI

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

Q&A

1回答

1855閲覧

ons-toolbar中身のページ遷移による動的変更

sato1108

総合スコア14

HTML5

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

AngularJS

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

CSS

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

Onsen UI

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

0グッド

0クリップ

投稿2018/05/28 01:16

編集2022/01/12 10:55

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

<ons-toolbar>を各<ons-page>内に定義してはどうでしょうか。

投稿2018/10/27 05:20

coboco

総合スコア121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sato1108

2018/10/28 23:51

暫定的にそのように対応しています。 回答頂きありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問