複数のng-repeat with groupBy

Question

以下の目的の結果を得るためにng-repeatを使ってこのオブジェクトをレンダリングする方法に困惑しています。

var object = [{'category':'A', 'subcategory': 'aa', 'status': 'expected', 'points':5}, 
        {'category':'B', 'subcategory': 'bb', 'status': 'complete', 'points':10}, 
        {'category':'C', 'subcategory': 'c1', 'status': 'expected', 'points':10}, 
        {'category':'C', 'subcategory': 'c2', 'status': 'expected', 'points':5}, 
        {'category':'C', 'subcategory': 'c3', 'status': 'complete', 'points':10}, 
        {'category':'C', 'subcategory': 'c4', 'status': 'complete', 'points':15}, 
        {'category':'D', 'subcategory': 'd1', 'status': 'complete', 'points':10}, 
        {'category':'D', 'subcategory': 'd2', 'status': 'expected', 'points':15}, 
        {'category':'E', 'subcategory': 'ee', 'status': 'complete', 'points':20}]; 

私は同じカテゴリのものをグループ化したいと思いますが、それぞれのレコードを個別に表示します。

HTMLの試み：

<table class"table"> 
     <thead> 
      <tr> 
      <th>Category</th> 
      <th>Status</th> 
      <th>Points</th> </tr> </thead> 
     <tbody> 
      <tr ng-repeat="(key, value) in products | groupBy: 'category'"> 
       <td>{{key}} 
        <!--WANT TO ACHIEVE BELOW--> 
        <div ng-if="multipleLines">{{value.subcategory}}</div></td> 

       <td ng-if="multipleLines"></td> <!--LEAVE BLANK IF MULTIPLE LINES OF SAME CATEGORY --> 
       <td ng-if="multipleLines"></td> <!--LEAVE BLANK IF MULTIPLE LINES OF SAME CATEGORY --> 
       <td ng-if="!multipleLines">{{value.status}}</td> 
       <td ng-if="!multipleLines">{{value.points}}</td> 

望ましい結果：

現在、コントローラが唯一の約束を使用してデータを取得します。まず、ng-repeatを使用してこのタイプのデータでこの結果を達成することは可能ですか？もしそうなら、どうですか？そうでない場合は、希望のテーブルを得るためにデータをどのように分離するのですか？

ありがとうございます！私は、フィルタでグループを使用する正しい方法があると信じて

Answer 1

良い方法があるでしょうが、私は1つがまたあなたのために動作します下回っと思います。

<table class="table"> 
    <thead> 
    <tr> 
    <th>Category</th> 
    <th>Status</th> 
    <th>Points</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat-start="(key, value) in products | groupBy:'category'"> 
     <td>{{key}}</td> 
     <td ng-if="value.length == 1" ng-repeat-start="(k,product) in value">{{product.status}}</td> 
     <td ng-if="value.length == 1" ng-repeat-end>{{product.points}}</td> 
    </tr> 
    <tr ng-if="value.length > 1" ng-repeat-end ng-repeat="product in value"> 
     <td align="right">{{product.subcategory}}</td> 
     <td>{{product.status}}</td> 
     <td>{{product.points}}</td> 
    </tr> 
    </tbody> 
    </table> 

JS Fiddle

Answer 2

：

<ul ng-repeat="key, value) in products | groupBy: 'category'"> 
    Group name: {{ key }} 
    <li ng-repeat="product in value"> 
    player: {{ product.subcategory }} 
    </li> 
</ul>