###前提・実現したいこと
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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/30 03:05
2016/06/30 05:56
2016/06/30 13:37