質問編集履歴

1

View側にロジックを書く方法でなく、コントローラでグルーピングする方針に変更

2016/06/30 03:00

投稿

tsu2772
tsu2772

スコア9

test CHANGED
File without changes
test CHANGED
@@ -143,3 +143,107 @@
143
143
  </div>
144
144
 
145
145
  ```
146
+
147
+
148
+
149
+ ###回答を受けて修正した内容
150
+
151
+ ```ここに言語を入力
152
+
153
+ <html ng-app="myApp">
154
+
155
+ <head>
156
+
157
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
158
+
159
+ <script>
160
+
161
+ var app = angular.module('myApp', []);
162
+
163
+ app.controller('myController', function() {
164
+
165
+ this.NEC_lists = [
166
+
167
+ { maker: 'NEC', name: 'Lavie y', price: 50000 },
168
+
169
+ { maker: 'NEC', name: 'Lavie z', price: 60000 },
170
+
171
+ { maker: 'NEC', name: 'Lavie g', price: 70000 }
172
+
173
+ ];
174
+
175
+ this.Apple_lists = [
176
+
177
+ { maker: 'Apple', name: 'Mac Book', price: 50000 },
178
+
179
+ { maker: 'Apple', name: 'Mac Book Air', price: 60000 },
180
+
181
+ { maker: 'Apple', name: 'Mac Book Pro', price: 70000 }
182
+
183
+ ];
184
+
185
+ this.Lenovo_lists = [
186
+
187
+ { maker: 'Lenovo', name: 'SL300', price: 50000 },
188
+
189
+ { maker: 'Lenovo', name: 'SL400', price: 60000 },
190
+
191
+ { maker: 'Lenovo', name: 'SL500', price: 70000 }
192
+
193
+ ];
194
+
195
+ });
196
+
197
+ </script>
198
+
199
+ </head>
200
+
201
+ <body>
202
+
203
+ <h1>PC一覧</h1>
204
+
205
+ <div ng-controller="myController as myCtrl">
206
+
207
+ <div>
208
+
209
+ <h2>NEC</h2>
210
+
211
+ <ul>
212
+
213
+ <li ng-repeat="list in myCtrl.NEC_lists">{{list.name}} : {{list.price|number}}円</li>
214
+
215
+ </ul>
216
+
217
+ </div>
218
+
219
+ <div>
220
+
221
+ <h2>Apple</h2>
222
+
223
+ <ul>
224
+
225
+ <li ng-repeat="list in myCtrl.Apple_lists">{{list.name}} : {{list.price|number}}円</li>
226
+
227
+ </ul>
228
+
229
+ </div>
230
+
231
+ <div>
232
+
233
+ <h2>Lenovo</h2>
234
+
235
+ <ul>
236
+
237
+ <li ng-repeat="list in myCtrl.Lenovo_lists">{{list.name}} : {{list.price|number}}円</li>
238
+
239
+ </ul>
240
+
241
+ </div>
242
+
243
+ </div>
244
+
245
+ </body>
246
+
247
+ </html>
248
+
249
+ ```