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;
  };

如何使用ng-repeat构建一个具有行的混合列数的表？

3 个答案: