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

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

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

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

Onsen UI

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

Q&A

0回答

1903閲覧

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

kumakumatan

総合スコア213

AngularJS

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

Onsen UI

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

0グッド

1クリップ

投稿2018/01/11 04:27

編集2018/01/16 04:47

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

js

1app.directive('test', function($time) { 2 return { 3 templateUrl: 'views/directives/test1/test.tmpl', 4 link: function(scope, element, attrs, ctrl) { 5 6 $time(function() { 7 8 // 名前プルダウンを初期化する 9 scope.existTest = false; 10 var test = []; 11 var keys = Object.keys(scope.itemModal.test_list); 12 for (var i = 0; i < keys.length; i++) { 13 var testtal = scope.itemModal.test_list[keys[i]]; 14 testtal.id = keys[i]; 15 testtal.text = testtal.test_name; 16 if (keys[i] === scope.itemModal.test_list[i].test_name) { 17 testtal.selected = true; 18 scope.existTest = true; 19 } 20 test.push(testtal); 21 // var test_d_name = testtal.test_d_name; 22//console.log("[test_d_name]", test_d_name); 23 24 } 25//console.log("[test_d_name]", scope.itemModal.testtal); 26 27 // 該当する名前が名前プルダウンに無い場合は、プルダウンを未選択状態にして、名前を表示する 28 $time(function() { 29 if (!scope.existTest) { 30 scope.itemModal.test_name = ''; 31 } 32 $("#testId").val(scope.itemModal.test_name).trigger('change'); 33 $("#testD").val(scope.itemModal.test_d_name).trigger('change'); 34 }); 35 36 $("#testId").select12({ 37 language: 'ja', 38 data: test, 39 minimumResultsForSearch: Infinity 40 }); 41 }); 42 } 43 }; 44});

●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>

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問