在ng-repeat中有条件地添加行

Question

我在AngularJS中有一个简单的重复表格行。

<tr ng-repeat="item in items">
    <td>{{ item.prop1 }}</td>
    <td>{{ item.prop2 }}</td>
</tr>

我的item对象有一个comment属性，如果该注释包含值，则我想将其单独显示在其余元素后面的行中，并使其跨越整个行。这种类型的事情可能吗？我查看了ng-repeat-end，但那似乎不是我想要的，我不能只是在ng-repeat中添加额外的<tr>元素，因为那将是无效的HTML。

- Gargoyle

---

这比看起来更难！ - pixelbits

谁在投反对票。请留下评论，说明回答有什么问题。 - Ashisha Nautiyal

我不明白为什么你不想要 ng-repeat-end，根据我在你的整篇文章中所读到的内容，它似乎是最可行的解决方案。 - ryeballar

Answer 1

您可以使用 ng-repeat 的特殊循环起始点和结束点，使用 ng-repeat-start 和 ng-repeat-end。

演示

HTML

<table ng-controller="PostController">
  <tr ng-repeat-start="post in posts">
    <td>{{post.content}}</td>
  </tr>
  <tr ng-repeat-end ng-repeat="comment in post.comments">
    <td>{{comment.content}}</td>
  </tr>
</table>

更新：如果评论是字符串，则只需在ng-repeat-end结束点处删除ng-repeat并添加一个ng-if表达式，验证post.comment的存在性即可。 演示 HTML

<table ng-controller="PostController">
  <tr ng-repeat-start="post in posts">
    <td>{{post.content}}</td>
  </tr>
  <tr ng-repeat-end ng-if="post.comment">
    <td>{{post.comment}}</td>
  </tr>
</table>

- ryeballar

---

该注释不是一个数组，而只是一个单独的字符串属性。 - Gargoyle

如果是这样的话，只需移除ng-repeat并在ng-repeat-end结束点添加post.comment即可吗？ - ryeballar

添加一个 ng-if="post.comment" 来验证其存在性。 - ryeballar

谢谢！这正是我在寻找的！ - Gargoyle