teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問onsen UI のselectで設定した値をもとに他の値もセットしたい

編集履歴

質問編集履歴

1

説明文の変更

2018/01/16 04:47

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -1,99 +1,225 @@
1
- OnsenUI+AngularJSを利用して開発しています。
1
+ AngularJSとonsen UIにてWEB画面を開発しています。
2
+
3
+
4
+
2
-
5
+ データ構造（$test_list）
3
-
4
-
6
+
5
- ```onsenui
7
+ ```ここに言語を入力
8
+
6
-
9
+ array(2) {
10
+
11
+ [0]=>
12
+
13
+ array(3) {
14
+
15
+ ["test_name"]=>
16
+
7
- <ons-row class="fieldRow">
17
+ string(15) "テスト太郎"
8
-
18
+
9
- <ons-col width="33%">氏名</ons-col>
19
+ ["test_d_name"]=>
10
-
20
+
11
- <ons-col width="65%">
21
+ string(6) "太郎"
12
-
13
- <select id="Id" data-role="none" ng-model="itemModal.id" style="width:100%">
22
+
14
-
15
- <option value="" id="IdEmpty">選択してください</option>
16
-
17
- </select>
18
-
19
- <span ng-show="itemModal.name"></span>
20
-
21
- </ons-col>
22
-
23
- </ons-row>
24
-
25
-
26
-
27
- <ons-row class="fieldRow">
23
+ ["test_address"]=>
28
-
29
- <ons-col width="33%">住所</ons-col>
24
+
30
-
31
- <ons-col width="65%">
25
+ string(6) "東京"
26
+
32
-
27
+ }
28
+
29
+ [1]=>
30
+
33
- <select id="address" data-role="none" ng-model="itemModal.address" style="width:100%" multiple="multiple">
31
+ array(3) {
34
-
32
+
35
- </select>
33
+ ["test_name"]=>
34
+
36
-
35
+ string(15) "テスト花子"
36
+
37
- </ons-col>
37
+ ["test_d_name"]=>
38
+
38
-
39
+ string(6) "花子"
40
+
39
- </ons-row>
41
+ ["test_address"]=>
42
+
43
+ string(6) "大阪"
44
+
45
+ }
46
+
47
+ }
40
48
 
41
49
  ```
42
50
 
51
+ ■実現したい事
52
+
53
+
54
+
43
- 「選択してください」ラベルから選んだ「itemModal.name」から同じ配列インデックスの「address」の値を
55
+ 「選択してください」ラベルから選んだ「$test_list[idx].test_name」から
56
+
44
-
57
+ 同じ配列インデックスの「test_d_name」と「test_address」の値をテキストボックスに表示させたいです。
58
+
59
+ 「test.js」内で「$test_list[idx].test_name」に対する「test_d_name」と「test_address」を取得して、
60
+
61
+ 「test.tmpl」内の「<input type="text" ng-model="itemModal.test_list[selectedIndex].test_d_name"」、
62
+
63
+ 「<input type="text" ng-model="itemModal.test_list[selectedIndex].test_address"」
64
+
65
+ に値をセットしたく思います。
66
+
67
+
68
+
69
+ ●test.js
70
+
71
+ ```js
72
+
73
+ app.directive('test', function($time) {
74
+
75
+ return {
76
+
77
+ templateUrl: 'views/directives/test1/test.tmpl',
78
+
79
+ link: function(scope, element, attrs, ctrl) {
80
+
81
+
82
+
83
+ $time(function() {
84
+
85
+
86
+
45
- 表示したく考えております。上記は自分なりに考えてものです。
87
+ // 名前プルダウンを初期化する
88
+
46
-
89
+ scope.existTest = false;
90
+
91
+ var test = [];
92
+
93
+ var keys = Object.keys(scope.itemModal.test_list);
94
+
95
+ for (var i = 0; i < keys.length; i++) {
96
+
97
+ var testtal = scope.itemModal.test_list[keys[i]];
98
+
99
+ testtal.id = keys[i];
100
+
101
+ testtal.text = testtal.test_name;
102
+
103
+ if (keys[i] === scope.itemModal.test_list[i].test_name) {
104
+
105
+ testtal.selected = true;
106
+
107
+ scope.existTest = true;
108
+
109
+ }
110
+
111
+ test.push(testtal);
112
+
113
+ // var test_d_name = testtal.test_d_name;
114
+
115
+ //console.log("[test_d_name]", test_d_name);
116
+
117
+
118
+
119
+ }
120
+
121
+ //console.log("[test_d_name]", scope.itemModal.testtal);
122
+
123
+
124
+
125
+ // 該当する名前が名前プルダウンに無い場合は、プルダウンを未選択状態にして、名前を表示する
126
+
127
+ $time(function() {
128
+
129
+ if (!scope.existTest) {
130
+
131
+ scope.itemModal.test_name = '';
132
+
133
+ }
134
+
135
+ $("#testId").val(scope.itemModal.test_name).trigger('change');
136
+
137
+ $("#testD").val(scope.itemModal.test_d_name).trigger('change');
138
+
139
+ });
140
+
141
+
142
+
143
+ $("#testId").select12({
144
+
145
+ language: 'ja',
146
+
147
+ data: test,
148
+
149
+ minimumResultsForSearch: Infinity
150
+
151
+ });
152
+
153
+ });
154
+
155
+ }
156
+
157
+ };
158
+
159
+ });
160
+
161
+ ```
162
+
47
- データ構造は
163
+ ●test.tmpl
48
-
49
-
50
164
 
51
165
  ```ここに言語を入力
52
166
 
53
- array(2) {
54
-
55
- [0]=>
56
-
57
- array(3) {
58
-
59
- ["id"]=>
60
-
61
- string(3) "011"
62
-
63
- ["name"]=>
64
-
65
- string(15) "テスト太郎"
66
-
67
- ["address"]=>
167
+ div class="modBody">
68
-
69
- string(6) "東京"
168
+
70
-
71
- }
72
-
73
- [1]=>
74
-
75
- array(3) {
76
-
77
- ["id"]=>
78
-
79
- string(3) "012"
80
-
81
- ["name"]=>
82
-
83
- string(15) "テスト花子"
169
+ <ons-row class="field">
170
+
84
-
171
+ <ons-col>名前</ons-col>
172
+
173
+ <ons-col>
174
+
175
+ <select id="testId" data-role="none" ng-model="itemModal.test_list[selectedIndex].test_name" style="width:100%">
176
+
177
+ <option value="" >選択してください</option>
178
+
85
- ["address"]=>
179
+ </select>
180
+
86
-
181
+ <span ng-show="itemModal.test_list[selectedIndex].test_name"></span>
182
+
183
+ </ons-col>
184
+
185
+ </ons-row>
186
+
87
- string(6) "大阪"
187
+ <ons-row class="field">
188
+
88
-
189
+ <ons-col>名</ons-col>
190
+
89
- }
191
+ <ons-col>
192
+
90
-
193
+ <input type="text" id="testD" ng-model="itemModal.test_list[selectedIndex].test_d_name"
194
+
195
+ class="test-input"
196
+
197
+ placeholder="名" />
198
+
199
+ </ons-col>
200
+
201
+ </ons-row>
202
+
203
+ <ons-row class="field">
204
+
205
+ <ons-col>住所</ons-col>
206
+
91
- }
207
+ <ons-col>
208
+
209
+ <input type="text" ng-model="itemModal.test_list[selectedIndex].test_address"
210
+
211
+ class="test-input"
212
+
213
+ placeholder="住所" />
214
+
215
+ </ons-col>
216
+
217
+ </ons-row>
92
218
 
93
219
  ```
94
220
 
95
221
  となっております。
96
222
 
97
- どのようにしたら値がセットできるかご教授いただきたく思います。
223
+ ご教授いただきたくお願い申し上げます。
98
224
 
99
225
  宜しくお願いします。