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>
となっております。
ご教授いただきたくお願い申し上げます。
宜しくお願いします。
あなたの回答
tips
プレビュー