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>

结合ngRepeat和条件指令

1 个答案: