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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AngularJS

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

Onsen UI

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

2102閲覧

OnsenUIコンポーネントの値保持

Mori-Yukito

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AngularJS

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

Onsen UI

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/06/10 08:16

###前提・実現したいこと
navigatorでpopPage()した後も、遷移前のpageの<ons-input type="checkbox">の値を保存しておきたいのですが、何か良い方法はないでしょうか?
Google先生で調べるのですが"localstrage"や"ng-controller"やら、どれが最も適した方法なのかはイマイチつかめず...
先生方、御指南よろしくお願いします。
###発生している問題・エラーメッセージ

###該当のソースコード
index.html

<ons-navigator> <ons-page> ... <ons-tab page="page1Navi.html"></ons-tab> ... </ons-page> </ons-navigator>

page1Navi.html

<ons-navigator id="page1Navi" page="page1.html"> </ons-navigator>

page1.html

<ons-page> <ons-list id="pushList" onclick="page1Navi.pushPage('page2Navi.html')"> </ons-list> ... </ons-page>

page2Navi.html

<ons-navigator page="page2.html"> </ons-navigator>

page2.html

<ons-page> <ons-toolbar> <ons-toolbar-button id="backButton" onclick="page1Navi.popPage()"> <ons-icon ...></ons-icon> </ons-toolbar-button> </ons-toolbar> <ons-list> <ons-list-item> <label ...> <ons-input type="checkbox" input-id="checkbox1"> </ons-input> </label> <label for="checkbox1" ...> </label> </ons-list-item> </ons-list> </ons-page>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
OnsenUI , Monaca etc...

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

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

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

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

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

guest

回答1

0

ベストアンサー

ons-navigatorで複数ページを利用する場合に、それぞれのページ間で値を受け渡すのには、苦労するというほどではありませんが、利用可能な選択肢の中からプロジェクトで使う方法を決めるのに多少時間がかかるかもしれません。

ng-controllerすら利用していない段階では余計に混乱させてしまうかもしれませんが、お勧めなのはAngularJSのServiceを用いる方法です。
各ページのng-controllerで値を受け渡すためのServiceを依存性注入し、各ページで共有したい値はそのServiceに設定しておくようにします。

具体例が欲しい場合は仰ってください。

■以下追記 具体的な動作例

index.html

html

1<!DOCTYPE HTML> 2<html ng-app="app"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16 17 <script> 18 19 var app = angular.module("app",["onsen"]) 20 21 angular.module("app") 22 .controller('page1Controller', function(shareService) { 23 24 this.test = function(){ 25 alert(shareService.getTestValue()) 26 } 27 28 }); 29 30 angular.module("app") 31 .controller('page2Controller', function(shareService) { 32 33 this.testVaue = shareService.getTestValue() 34 35 this.test = function(){ 36 shareService.setTestValue(this.testVaue) 37 } 38 39 }); 40 41 angular.module("app") 42 .service("shareService", function() { 43 this.testValue = false 44 45 this.setTestValue=function(val){ 46 this.testValue = val 47 } 48 this.getTestValue=function(){ 49 return this.testValue 50 } 51 }); 52 53 ons.ready(function() { 54 console.log("Onsen UI is ready!"); 55 }); 56 </script> 57</head> 58<body> 59 60 <ons-page> 61 62 <ons-tabbar> 63 <ons-tab label="Tab 1" page="page1Navi.html" active></ons-tab> 64 </ons-tabbar> 65 66 </ons-page> 67 68</body> 69</html>

page1Navi.html

html

1<ons-navigator var="page1Navi" page="page1.html"> 2</ons-navigator>

page1.html

html

1<ons-page ng-controller="page1Controller as page1C"> 2 <ons-list id="pushList"> 3 <ons-list-item ng-click="page1Navi.pushPage('page2.html')">test1</ons-list-item> 4 <ons-list-item ng-click="page1C.test()">alert</ons-list-item> 5 </ons-list> 6</ons-page>

page2.html

html

1<ons-page ng-controller="page2Controller as page2C"> 2 <ons-toolbar> 3 <ons-toolbar-button id="backButton" onclick="page1Navi.popPage()"> 4 back 5 </ons-toolbar-button> 6 </ons-toolbar> 7 8 <ons-list> 9 <ons-list-item> 10 <ons-input type="checkbox" ng-model="page2C.testVaue" ng-change="page2C.test()"> 11 </ons-input> 12 </ons-list-item> 13 </ons-list> 14</ons-page>

投稿2017/06/11 02:08

編集2017/06/11 12:17
akabee

総合スコア1947

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

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

Mori-Yukito

2017/06/11 08:19

いつも分かりやすい解説・回答ありがとうございます。 ぜひ具体例を教えてください(._.)
akabee

2017/06/11 12:19

ひとまず動作するコードを追記しておきましたが、例えばons-navigatorを二つ使用している理由が分からなかったりcontrollerが利用されていなかったりしたので適当に追加修正しておきました。 一つ目のページのalertボタンの実行結果が、二つ目のページのチェックボックスon/offによって変わると思います。
Mori-Yukito

2017/06/15 04:53 編集

AngularJSはOnsenUIとの相性バツグンですね。 勉強しなければ...(-_-;)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問