質問編集履歴

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

tsu2772

tsu2772 score 9

2016/06/30 12:00  投稿

[AngularJS]グループ毎の繰り返し表示について
###前提・実現したいこと
AngularJSでグループ毎に繰り返し表示をしたいです。
<!-- ココ -->にコードを書くことで実現しようとしています。
どのようなng属性を使えば実現できるか、他に良い方法がありましたらご教示ください。
よろしくお願いします。
###該当のソースコード
```ここに言語を入力
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function() {
   this.lists = [
       { maker: 'NEC', name: 'Lavie y', price: 50000 },
       { maker: 'NEC', name: 'Lavie z', price: 60000 },
       { maker: 'NEC', name: 'Lavie g', price: 70000 },
       { maker: 'Apple', name: 'Mac Book', price: 50000 },
       { maker: 'Apple', name: 'Mac Book Air', price: 60000 },
       { maker: 'Apple', name: 'Mac Book Pro', price: 70000 },
       { maker: 'Lenovo', name: 'SL300', price: 50000 },
       { maker: 'Lenovo', name: 'SL400', price: 60000 },
       { maker: 'Lenovo', name: 'SL500', price: 70000 }
   ];
});
</script>
</head>
<body>
<h1>PC一覧</h1>
 <div ng-controller="myController as myCtrl">
   <!-- ココ -->
 </div>
</body>
</html>
```
###欲しい結果
```ここに言語を入力
<div>
 <h2>NEC</h2>
 <ul>
   <li>Lavie y : 50,000円</li>
   <li>Lavie z : 60,000円</li>
   <li>Lavie g : 70,000円</li>
 </ul>
</div>
<div>
 <h2>Apple</h2>
 <ul>
   <li>Mac Book : 50,000円</li>
   <li>Mac Book Air : 60,000円</li>
   <li>Mac Book Pro : 70,000円</li>
 </ul>
</div>
<div>
 <h2>Lenovo</h2>
 <ul>
   <li>SL300 : 50,000円</li>
   <li>SL400 : 60,000円</li>
   <li>SL500 : 70,000円</li>
 </ul>
</div>
```
###試したこと
下記コードでPC名と価格は表示できました。
メーカーごとに表示ができません。
```ここに言語を入力
<div>
 <ul>
   <li ng-repeat="list in myCtrl.lists">{{list.name}} : {{list.price|number}}円</li>
 </ul>
</div>
```  
 
###回答を受けて修正した内容  
```ここに言語を入力  
<html ng-app="myApp">  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myController', function() {  
   this.NEC_lists = [  
       { maker: 'NEC', name: 'Lavie y', price: 50000 },  
       { maker: 'NEC', name: 'Lavie z', price: 60000 },  
       { maker: 'NEC', name: 'Lavie g', price: 70000 }  
   ];  
   this.Apple_lists = [  
       { maker: 'Apple', name: 'Mac Book', price: 50000 },  
       { maker: 'Apple', name: 'Mac Book Air', price: 60000 },  
       { maker: 'Apple', name: 'Mac Book Pro', price: 70000 }  
   ];  
   this.Lenovo_lists = [  
       { maker: 'Lenovo', name: 'SL300', price: 50000 },  
       { maker: 'Lenovo', name: 'SL400', price: 60000 },  
       { maker: 'Lenovo', name: 'SL500', price: 70000 }  
   ];  
});  
</script>  
</head>  
<body>  
<h1>PC一覧</h1>  
 <div ng-controller="myController as myCtrl">  
   <div>  
     <h2>NEC</h2>  
     <ul>  
       <li ng-repeat="list in myCtrl.NEC_lists">{{list.name}} : {{list.price|number}}円</li>  
     </ul>  
   </div>  
   <div>  
     <h2>Apple</h2>  
     <ul>  
       <li ng-repeat="list in myCtrl.Apple_lists">{{list.name}} : {{list.price|number}}円</li>  
     </ul>  
   </div>  
   <div>  
     <h2>Lenovo</h2>  
     <ul>  
       <li ng-repeat="list in myCtrl.Lenovo_lists">{{list.name}} : {{list.price|number}}円</li>  
     </ul>  
   </div>  
 </div>  
</body>  
</html>  
```
  • AngularJS

    641 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る