使用 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>

期望的结果：

目前，controller 仅使用promise 获取数据。首先，是否有可能使用 ng-repeat 对此类数据实现此结果？如果是这样，如何？如果没有，我将如何分离数据以实现所需的 table?

提前致谢！

Answer 1

我认为使用带过滤器的组的正确方法是：

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

Answer 2

会有更好的方法，但我认为下面的方法也适合您。

<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

使用 groupBy 重复多次

multiple ng-repeat with groupBy

javascript

json

nested

angularjs

ng-repeat