1
情報の結果を返すJSONデータを持つプロジェクトを作成しています。基本的には、カテゴリによってフィルタリングされるBootStrapタブを使用してこれらのデータを表示することです。AngularJS NG-repeat：ユニークな値をフィルタリングするng-repeat内のデータを繰り返す方法
モックJSONデータ：
"result": [
{
category: "A",
price: "499.00",
productName: "AAA",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: false,
description: "blah blah",
...
}
},
{
category: "A",
price: "479.00",
productName: "AAB",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: true,
description: "blah blah",
...
}
},
{
category: "B",
price: "1299.00",
productName: "BBB",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: true,
description: "blah blah",
...
}
},
{
category: "A",
price: "359.00",
productName: "AXX",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: true,
description: "blah blah",
...
}
},
]
そのデータを考えます。私は必然的に、ng-repeatを使ってこれらのデータをすべてbootstrapタブに表示する必要があります。
私はこのような何かをしたい：
マークアップは次のようになります。
<a load-data data-param="1">Load me</a>
ディレクティブは、サービスを呼び出して、すべてのデータが範囲内にあります。
<ul class="nav nav-tabs col-lg-4 col-md-4" role="tablist">
<li ng-repeat="data in tableData | unique: 'category'"><a href="#{{$index}}" role="tab" toggle="tab"></li>
</ul>
...
<div class="tab-content col-lg-8 col-md-8">
<div role="tabpanel" class="tab-pane fade" id="{{$index}}" ng-repeat="contents in tableData | unique: 'category'">
<h1>{{ contents.category }}</h1>
<div class="tab-content-details">
<table class="table">
<tr>
<td>{{ contents.price }}</td>
<td>{{ contents.productConfig.specs }}</td>
<td>{{ contents.productConfig.description }}</td>
</tr>
</table>
</div>
</div>
</div>
をしかし、現在のコードは次のようになり、私に結果を与える：今、要素はこれを持っている
各カテゴリには1 nav-linkと1 tab-paneに相当します。カテゴリに複数の商品がある場合は、<table>はng-repeatに、tab-paneには表示されません。ここで
はソートの理想的なマークアップ結果の目標を達成するために、次のとおりです。
<ul class="nav nav-tabs col-lg-4 col-md-4" role="tablist">
<li class="active"><a href="#0" role="tab" toggle="tab">Category A</li>
<li><a href="#1" role="tab" toggle="tab">Category B</li>
...
</ul>
...
<div class="tab-content col-lg-8 col-md-8">
<div role="tabpanel" class="tab-pane fade active" id="0">
<h1>Category A</h1>
<div class="tab-content-details">
<table class="table">
<tr>
<td>499.00</td>
<td>Lorem ipsum</td>
<td>blah blah</td>
</tr>
<tr>
<td>479.00</td>
<td>Lorem ipsum</td>
<td>blah blah</td>
</tr>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="1">
<h1>Category B</h1>
<div class="tab-content-details">
<table class="table">
<tr>
<td>1299.00</td>
<td>Lorem ipsum</td>
<td>blah blah</td>
</tr>
</table>
</div>
</div>
</div>
は、私は、データの現在の構造で、私が欲しいの結果を得ることができます方法はありますか？皆さんありがとう！
あなたはユニークなカテゴリを見つけて、そのカテゴリ内で繰り返さカテゴリをプッシュする必要があり、すべての最初のようなあなたのJSONオブジェクトを再構築する必要があります。この方法で、必要なものを簡単に達成することができます。 – Dixit
hrefをカテゴリに変更し、配列要素をカテゴリ別にグループ化し、idをカテゴリ別にidにするのはなぜですか？ – ChiefTwoPencils
また、配列自体をカテゴリ別にフィルタリングし、フィルタリングされた配列をカテゴリにマップするオブジェクトを作成し、マップの（キー、値）ペアを使用するリピートにすべてをラップすることもできます。 – ChiefTwoPencils