Question

我希望使用角度重复

这样的表格

HTML

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>

  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

我已经为上面写了一个Angularjs代码如下。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr ng-repeat="row in rows">
    <td>{{row.month}}</td>
    <td>{{row.savings}}</td>
    <td rowspan="2">{{row.holidaysavings}}</td>      
  </tr> 
</table>

使用ng-repeat重复使用rowspan的td，这不是必需的。我怎么能避免这个？

Answer 1

如果您只想设置td时才需要最后一个row.holidaysavings元素（您没有提及它，但听起来就像它！），您可以使用ngIf。

ngIf与ngShow类似，但是如果表达式是假的（例如0或空字符串），则将其从DOM中删除而不是设置display: none，听起来像你想要的：

<td rowspan="2" data-ng-if="row.holidaysavings">{{row.holidaysavings}}</td>

Answer 2

您是否尝试过使用ng-class？像<td ng-class='{rowSpanClass: row.holidaysavings >== "$50"}

这样的东西

在ng-repeat中跳过重复某些列

2 个答案: