如何使用 ng-repeat 构建一个表，其中行的列数是混合的？

Question

我真的不知道如何简洁地描述我正在尝试做的事情，所以对于糟糕的标题感到抱歉。但是我有一张表，我想在其中交错不同类型的行。我有一行反映顶部的列，还有另一行跨越所有列以显示年份。

例如：

<table>
  <thead>...</thead>
  <tbody>
     <tr>
         <td>11/30/2013</td>
         <td>Some Description</td>
         <td>$1450.00</td>
         ...
     </tr>
     <tr>
         <td>12/31/2013</td>
         <td>Some Description</td>
         <td>$1450.00</td>
         ...
     </tr>
     <tr colspan="9">2014</tr>
     <tr>
         <td>1/31/2014</td>
         <td>Some Description</td>
         <td>$1450.00</td>
         ...
     </tr>
   </tbody>
</table>

这是将所有数据放入表中的简单实现：

<table>
  <thead>...</thead>
  <tbody>
      <tr ng-repeat="paycheck in paychecks">
         <td>{{paycheck.payDate}}</td>
         <td>{{paycheck.description}}</td>
         <td>{{paycheck.amount}}</td>
         ...
      </tr>
  </tbody>
</table>

但是，当我遍历年度边界时，我想将这一行放在这些行之间：

<tr>
   <td colspan="9" ng-if="paycheck.payDate.year > previousPaycheck.payDate.year">{{paycheck.payDate.year}}</td>
</tr>

这意味着当上述条件为真时，我必须在表中添加两行，但使用 ng-repeat 我只添加一个。我怀疑我必须重建我的数据结构，以便在其中插入年份边界，因此 ng-repeat 将是 1:1，表中的行和数组中的元素。或者也许一些特殊的指令魔法可以让这更容易。

有没有我看不到的简单方法？

Answer 1

您可以使用ng-repeat-start 和ng-repeat-end。

<tbody>
      <tr ng-repeat-start="paycheck in paychecks">
        <td colspan="9" ng-if="paycheck.payDate.year > paychecks[$index-1].payDate.year">  {{paycheck.payDate.year}}</td>
      </tr>
      <tr ng-repeat-end>
         <td>{{paycheck.payDate}}</td>
         <td>{{paycheck.description}}</td>
         <td>{{paycheck.amount}}</td>
      </tr>          
</tbody>

Plunker

Answer 2

ng-repeat 有一些变量在每次迭代时附加到作用域，一个是 $index。

利用这一点，您可以执行以下操作：

<table>
    <tbody ng-repeat="date in data">
      <tr ng-show='$index == 0 || data[$index].year != data[$index-1].year'>
        <td colspan="3">{{date.year}}</td>
      </tr>
      <tr>
        <td>{{date.year}}</td>
        <td>{{date.month}}</td>
        <td>{{date.day}}</td>
      </tr>
    </tbody>
</table>

Plunker：http://plnkr.co/edit/axuKJTuTii1v8M4cX5Dk

请注意，这需要对您的数据进行排序。

Answer 3

有趣的问题。

这是 plunker 中的一个有效解决方案：http://plnkr.co/edit/a55krX8x9G1e5MGUIz0A?p=preview

逻辑： 首先，数据必须按payDate 排序才能正常工作

   <tbody ng-repeat="paycheck in paychecksOrdered">
      <tr ng-show="header(paycheck, $index)">
        <td colspan="9">{{paycheck.payDate | date:'yyyy'}}</td>
      </tr>
      <tr>
        <td>{{paycheck.payDate}}</td>
        <td>{{paycheck.description}}</td>
        <td>{{paycheck.amount}}</td>
      </tr>
    </tbody>



  $scope.paychecksOrdered = $filter('date')(paychecks, 'payDate');
  $scope.header = function(paycheck, i) {
    if (i === 0) {
      return true;
    }
    console.log(i);
    var past = $scope.paychecksOrdered[i - 1].payDate.getFullYear(),
      cur = paycheck.payDate.getFullYear();
    console.log(cur, past);
    return past != cur;
  };