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

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

ただいまの
回答率

90.87%

  • JavaScript

    14728questions

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

  • HTML

    8026questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5130questions

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

  • Monaca

    916questions

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

  • AngularJS

    552questions

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

AngularJSを使った別ページへの値の受け渡し

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 439

Daiki1108

score 6

 前提・実現したいこと

AngularJSでチェックボックスの値の結果をボタン(下記の完了ボタン)を押すことにより画面遷移と同時にデータを持っていき、別ページに選択したチェックボックスのvalue(下記の場合フルーツ名)を表示するというアプリケーションを作っています。同じページでは値をチェックボックスの下に表示できるのですが、別ページに表示となると何をどうしていいのか全くわかりません。
画面遷移は今のところ<a>タグを使って行っています。
知ってらっしゃる方居ましたらご教授お願いいたします。

 該当のソースコード

**index.html**

<!DOCTYPE HTML>
<html ng-app="myApp">

<省略>

<div ng-controller="AppController">
<ul>
  <li ng-repeat="fruit in fruits">
    <label><input type="checkbox" ng-model="fruit.checked">{{fruit.name}}</label>
  </li>
</ul>
<a href="test.html" ng-click="check()">
    完了
</a>
    <p ng-repeat="data in foods">{{data}}</p>

</div>
</body>
</html>
**test.html**

<!DOCTYPE HTML>
<html ng-app="myApp">

<省略>

<div ng-controller="NewAppController">

<p ng-repeat="data in testVar">{{data}}</p>

</div>
</body>
</html>
var testVar = [];

var app = angular.module('myApp', []);

//遷移元コントローラー
app.controller('AppController', function($scope) {
  $scope.fruits = [
    {id: 1, name: 'リンゴ'},
    {id: 2, name: 'バナナ'},
    {id: 3, name: 'グレープ'},
    {id: 4, name: 'オレンジ'},
    {id: 5, name: 'ピーチ'}
  ];

  $scope.check = function() {

    angular.forEach($scope.fruits, function(value, index, array) {
        if (value.checked) {
            testVar.push(value.name);
            console.log(value.name);
        }
        $scope.testVar = testVar;
    });
   };
};

//遷移先コントローラー
app.controller('NewAppController', function($scope) {
    $scope.testVar;
});

 試したこと

ここに問題に対して試したことを記載してください。

 補足情報(FW/ツールのバージョンなど)

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

Controllerはあくまで一画面上での処理に特化したものですので、画面遷移が関わってくると、Controller以外のものと組み合わせて処理を構築しなければなりません。

最も単純な方法としては、以下のようにグローバル変数(以下の例ではvar = testVar)を用意しておいて、そこに遷移元のControllerで値を設定し、遷移先のControllerで参照するという方法です。

var app = angular.module('myApp', []);

//遷移元コントローラー
app.controller('AppController', function($scope,GlobalService) {

  var testVar = [];

  $scope.fruits = [
    {id: 1, name: 'リンゴ'},
    {id: 2, name: 'バナナ'},
    {id: 3, name: 'グレープ'},
    {id: 4, name: 'オレンジ'},
    {id: 5, name: 'ピーチ'}
  ];

  $scope.check = function() {

    angular.forEach($scope.fruits, function(value, index, array) {
        if (value.checked) {
            testVar.push(value.name);
            console.log(value.name);
        }
        GlobalService.testVar = testVar;
    });
   };
};

//遷移先コントローラー
app.controller('NewAppController', function($scope,GlobalService) {
    $scope.testVar = GlobalService.testVar;
});


//遷移先コントローラー
app.service('GlobalService', function() {
    this.testVar;
});

私個人としては、画面遷移時の変数共有のためのServiceを用いて値の共有を行っています。
ServiceはAngularJSの動作において全画面で1つのみ存在しますのでControllerで依存性注入すれば値の共有に利用できます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/18 11:05

    お答えいただきありがとうございます。コードを今トライしている形に変更させて頂きました。遷移先に全く現れてくれません。初歩的な所でつまっているのではとは思っているのですが。。。(同時進行でfactoryで共有するという方も試しています。)

    キャンセル

  • 2018/05/18 11:27

    回答のコードを変更してみました。これで受け取れないかお試しいただけませんでしょうか。

    キャンセル

  • 2018/05/18 11:38

    これは遷移先ページへの値の受け渡しはどうなっていますか?$scope.getTestVar;...?

    キャンセル

  • 2018/05/18 12:04

    $scopeは利用していません。
    testVarはグローバル変数です。詳しくは説明しませんが、monacaであれば画面全体で利用可能です。
    受け渡しているというよりは、testVarは画面全体で常に有効な変数であるということです。
    getTestVarはNewAppControllerのローカル変数で、その名前で私が宣言しているだけです。

    ちなみに、受け取ることはできましたか?

    キャンセル

  • 2018/05/18 14:15 編集

    受取れていません。
    htmlファイルを全く違うファイルにしているからでしょうか。(monacaでよくあるindex.htmlの中で画面遷移(page1.htmlだったりpage2.html)にしているのではない)

    また遷移先で
    js

    //遷移先コントローラー
    app.controller('NewAppController', function($scope) {

    function test(){
    alert(testVar);
    }
    var getTestVar = testVar //受け取り

    });


    を行ったところ、アラートには何も入っていなかったので、中身が来ていないと思われます。

    キャンセル

  • 2018/05/18 14:52

    申し訳ありません、上手くいっていなかったのですね。なぜだろう。。
    再度回答のコードを修正しました。私のよく利用する、serviceを利用しての値の共有ですが、これでも上手くいきませんでしょうか。

    キャンセル

  • 2018/05/18 15:01 編集

    ほとんど間違いのないようにほとんどコピーアンドペーストでテストしてみましたが、やはりうまくいきませんでした。。
    HTMLの<a href="test.html" ng-click="check()">ここで<a>タグでの遷移がいけないのでしょうか。
    今はMonacaのNoflameworkというテンプレートにangularJSを入れているだけなので、OnsenUIは使用しておりません。

    キャンセル

  • 2018/05/18 16:00

    そういうことですか、<a>タグで遷移すると上手くいかないと思います。
    ※添付頂いているコードに記載されていましたが見落としていました。

    <省略>となっているところが気になっていましたが、もしかしてどちらのページでも同じjavascriptを読み込んでいますか?

    ons.navigatorを利用した画面遷移を試してみてください。ファイルを分けてもons.navigatorは利用できますよ。
    ※index.htmlの中で画面遷移(page1.htmlだったりpage2.html)にしなくてもよい

    キャンセル

  • 2018/05/18 16:06

    <a>タグは文字通り画面を切り替えるわけですが、MonacaはSPA(シングルページアプリケーション)を謳っており、ons-navigatorはその設計思想の中で画面遷移を実現する機能です。
    index.htmlが読み込まれた後は「画面遷移しているように見せかけている」だけで、一度読み込んだjavascriptは永続的に利用します。なので当初のとおりグローバル変数などが有効になるはずだったわけです。
    <a>タグによる画面遷移はhtmlを新しく読み込むため、一度読み込んだjavascriptは有効でなくなり、値の受け渡しができなくなります。(どうにかすればできるのかもしれませんが、monaca,
    AnguarJSを利用するのであればSPAに基づいた設計をすべきでしょう。)

    キャンセル

  • 2018/05/18 18:04

    私も今までSPAなどあまり考えてこなかったですが、ようやく理解できました。
    Monacaの良さを何も使えていませんでした。。。
    新しくonsen等使って全てやり直してみたいと思います。
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14728questions

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

  • HTML

    8026questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5130questions

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

  • Monaca

    916questions

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

  • AngularJS

    552questions

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