javascript - 结合ngRepeat和条件指令

我正在尝试为项目学习一些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的实现方法是什么？

最佳答案

您不需要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>

关于javascript - 结合ngRepeat和条件指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20820365/