結合ngRepeat和條件指令

Question

我正在嘗試為項目學習一些AngularJS。 在我的模型中，我有一個可以是不同類型的元素列表。 現在我想在一個看起來類似於這個例子的表中顯示它們：

<table>
  <tr><td>nameA</td><td>...</td><td>...</td></tr>         <!-- elements of type A -->
  <tr><td>nameB</td><td colspan="2">...data...</td></tr>  <!-- elements of type B -->
  <tr><td>nameC</td><td>...</td><td>...</td></tr>         <!-- elements of type A -->
</table>

如果元素是類型A，它應該像第一個和第三個表行一樣顯示，如果它是B類，它應該像第二個表行一樣顯示。

我如何使用AngularJS實現這一目標？ 我開始使用以下內容：

<table>
  <tr ng-repeat="elem in data.elements | orderBy:'name'">
    <td>{{ elem.name }}</td><td>...</td><td>...</td>
  </tr>
</table>

但是現在所有的表行都具有相同的格式。 我不知道如何將它與某種類型的條件指令結合使用，以便為表行使用不同的模板，具體取決於elem.type 。 我需要這樣的東西：

<table>
  <tr ng-repeat="elem in data.elements | orderBy:'name'">
    <pseudo-tag ng-if="elem.type == 'typeA'">
      <td>{{ elem.name }}</td><td>...</td><td>...</td>
    </pseudo-tag>
    <pseudo-tag ng-if="elem.type == 'typeB'">
      <td>{{ elem.name }}</td><td colspan="2">...data...</td>
    </pseudo-tag>
  </tr>
</table>

什么是AngularJS-y實現這一目標的方法？

Answer 1

您不應該需要pseudo-tag因為ng-if可以直接應用於td 。 這樣的事情應該有效：

<table>
  <tr ng-repeat="elem in data.elements | orderBy:'name'">
    <td ng-if="elem.type == 'typeA' || elem.type == 'typeB'">{{ elem.name }}</td>
    <td ng-if="elem.type == 'typeB'" colspan="2">...data...</td>
    <td ng-if="elem.type == 'typeA'">...</td>
    ...
  </tr>
</table>