質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
AngularJS

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

Q&A

解決済

1回答

2362閲覧

[AngularJS]グループ毎の繰り返し表示について

tsu2772

総合スコア9

AngularJS

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

0グッド

0クリップ

投稿2016/06/30 02:08

編集2016/06/30 03:00

###前提・実現したいこと
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

表示用にコントローラでグルーピングしてしまうのが簡単かと思います。
View側にその辺のロジック書きたくないですし。。。

投稿2016/06/30 02:19

k.tada

総合スコア1679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsu2772

2016/06/30 03:05

ご回答ありがとうございます。 View側でなくコントローラでグルーピングするよう修正し、コードを追記いたしました。 認識のずれがありましたらご指摘お願いいたします。
tsu2772

2016/06/30 13:37

実装例を公開していただき、ありがとうございます。 大変勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問