質問するログイン新規登録

質問編集履歴

1

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

2016/06/30 03:00

投稿

tsu2772
tsu2772

スコア9

title CHANGED
File without changes
body CHANGED
@@ -70,4 +70,56 @@
70
70
  <li ng-repeat="list in myCtrl.lists">{{list.name}} : {{list.price|number}}円</li>
71
71
  </ul>
72
72
  </div>
73
+ ```
74
+
75
+ ###回答を受けて修正した内容
76
+ ```ここに言語を入力
77
+ <html ng-app="myApp">
78
+ <head>
79
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
80
+ <script>
81
+ var app = angular.module('myApp', []);
82
+ app.controller('myController', function() {
83
+ this.NEC_lists = [
84
+ { maker: 'NEC', name: 'Lavie y', price: 50000 },
85
+ { maker: 'NEC', name: 'Lavie z', price: 60000 },
86
+ { maker: 'NEC', name: 'Lavie g', price: 70000 }
87
+ ];
88
+ this.Apple_lists = [
89
+ { maker: 'Apple', name: 'Mac Book', price: 50000 },
90
+ { maker: 'Apple', name: 'Mac Book Air', price: 60000 },
91
+ { maker: 'Apple', name: 'Mac Book Pro', price: 70000 }
92
+ ];
93
+ this.Lenovo_lists = [
94
+ { maker: 'Lenovo', name: 'SL300', price: 50000 },
95
+ { maker: 'Lenovo', name: 'SL400', price: 60000 },
96
+ { maker: 'Lenovo', name: 'SL500', price: 70000 }
97
+ ];
98
+ });
99
+ </script>
100
+ </head>
101
+ <body>
102
+ <h1>PC一覧</h1>
103
+ <div ng-controller="myController as myCtrl">
104
+ <div>
105
+ <h2>NEC</h2>
106
+ <ul>
107
+ <li ng-repeat="list in myCtrl.NEC_lists">{{list.name}} : {{list.price|number}}円</li>
108
+ </ul>
109
+ </div>
110
+ <div>
111
+ <h2>Apple</h2>
112
+ <ul>
113
+ <li ng-repeat="list in myCtrl.Apple_lists">{{list.name}} : {{list.price|number}}円</li>
114
+ </ul>
115
+ </div>
116
+ <div>
117
+ <h2>Lenovo</h2>
118
+ <ul>
119
+ <li ng-repeat="list in myCtrl.Lenovo_lists">{{list.name}} : {{list.price|number}}円</li>
120
+ </ul>
121
+ </div>
122
+ </div>
123
+ </body>
124
+ </html>
73
125
  ```