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

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

ただいまの
回答率

90.62%

  • AngularJS

    565questions

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

  • Onsen UI

    319questions

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

onsen UI のselectで設定した値をもとに他の値もセットしたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 538

kumakumatan

score 121

AngularJSとonsen UIにてWEB画面を開発しています。

データ構造($test_list)

array(2) {
    [0]=>
    array(3) {
      ["test_name"]=>
      string(15) "テスト太郎"
      ["test_d_name"]=>
      string(6) "太郎"
      ["test_address"]=>
      string(6) "東京"
    }
    [1]=>
    array(3) {
      ["test_name"]=>
      string(15) "テスト花子"
      ["test_d_name"]=>
      string(6) "花子"
      ["test_address"]=>
      string(6) "大阪"
    }
}


■実現したい事

「選択してください」ラベルから選んだ「$test_list[idx].test_name」から
同じ配列インデックスの「test_d_name」と「test_address」の値をテキストボックスに表示させたいです。
「test.js」内で「$test_list[idx].test_name」に対する「test_d_name」と「test_address」を取得して、
「test.tmpl」内の「<input type="text" ng-model="itemModal.test_list[selectedIndex].test_d_name"」、
「<input type="text" ng-model="itemModal.test_list[selectedIndex].test_address"」
に値をセットしたく思います。

●test.js

app.directive('test', function($time) {
    return {
        templateUrl: 'views/directives/test1/test.tmpl',
        link: function(scope, element, attrs, ctrl) {

            $time(function() {

                // 名前プルダウンを初期化する
                scope.existTest = false;
                var test = [];
                var keys = Object.keys(scope.itemModal.test_list);
                for (var i = 0; i < keys.length; i++) {
                    var testtal = scope.itemModal.test_list[keys[i]];
                    testtal.id = keys[i];
                    testtal.text = testtal.test_name;
                    if (keys[i] === scope.itemModal.test_list[i].test_name) {
                        testtal.selected = true;
                        scope.existTest = true;
                    }
                    test.push(testtal);
            //    var test_d_name = testtal.test_d_name;
//console.log("[test_d_name]", test_d_name);

                }
//console.log("[test_d_name]", scope.itemModal.testtal);

                // 該当する名前が名前プルダウンに無い場合は、プルダウンを未選択状態にして、名前を表示する
                $time(function() {
                    if (!scope.existTest) {
                        scope.itemModal.test_name = '';
                    }
                    $("#testId").val(scope.itemModal.test_name).trigger('change');
                    $("#testD").val(scope.itemModal.test_d_name).trigger('change');
                });

                $("#testId").select12({
                    language: 'ja',
                    data: test,
                    minimumResultsForSearch: Infinity
                });
            });
        }
    };
});


●test.tmpl

div class="modBody">
    <ons-row class="field">
        <ons-col>名前</ons-col>
        <ons-col>
            <select id="testId" data-role="none" ng-model="itemModal.test_list[selectedIndex].test_name" style="width:100%">
                <option value="" >選択してください</option>
            </select>
            <span ng-show="itemModal.test_list[selectedIndex].test_name"></span>
        </ons-col>
    </ons-row>
    <ons-row class="field">
        <ons-col></ons-col>
        <ons-col>
            <input type="text" id="testD" ng-model="itemModal.test_list[selectedIndex].test_d_name"
                class="test-input"
                placeholder="名" />
        </ons-col>
    </ons-row>
    <ons-row class="field">
        <ons-col>住所</ons-col>
        <ons-col>
            <input type="text" ng-model="itemModal.test_list[selectedIndex].test_address"
                class="test-input"
                placeholder="住所" />
        </ons-col>
    </ons-row>


となっております。
ご教授いただきたくお願い申し上げます。
宜しくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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

  • AngularJS

    565questions

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

  • Onsen UI

    319questions

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