没有 html 元素的 ng-repeat答案

【问题标题】：ng-repeat without an html element没有 html 元素的 ng-repeat
【发布时间】：2019-11-07 09:23:26
【问题描述】：

我正在尝试生成一个博客列表，但我遇到了 ng-repeat 的问题。我的列表是这样的

<ul>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <span class="sep2"></sep>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <span class="sep2"></sep>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
</ul>

因此，在每 2 个列表项之后，我就有一个跨度来调整我接下来的 2 个框。现在我有这个角码。

<ul>
    <li ng-repeat="post in postsJSON">
        <h2>{{post.title}}</h2>
        <p>{{post.message}}</p>
    </li>
</ul>

而且我不知道如何在每个第二个列表项之后生成该跨度。提前谢谢你，丹尼尔！

【问题讨论】：

你真的需要span吗？似乎这可以使用nth-child css 选择器来完成。还有span in ul?
我的帖子在 3 列上，每列都有不同的高度，如果我不使用 100% 宽度的跨度，第一个下方的那些将定位奇怪。而且我不能使用表格，因为我的布局是响应式的，并且 ipad 上的 3 列变成了 2 列。
你可能也想发布你的 css，或者设置一个 plunker/fiddle。这看起来更像是一个 css 而不是 js 的问题。

标签： javascript html css angularjs

【解决方案1】：

使用 Angular v1.2 变得非常简单，使用 ng-repeat-start、ng-repeat-end 和 ng-if，您可以在这里查看：http://jsfiddle.net/DotDotDot/XNJvj/1/

您的代码将如下所示：

    <ul>
        <li ng-repeat-start='post in postsJSON'>
            {{post.item}}<br/>
            {{post.message}}
        </li>
        <span ng-if="$odd && !$first" ng-repeat-end>
            <span class="sep2">_____</span>
        </span>
    </ul>

ng-repeat-start/end允许你在一个标签中输入一个循环并在另一个标签中关闭它，在这种情况下，我还使用ng-repeat的$odd参数添加了一个条件，只显示每隔一个span

【讨论】：

然而span 不应该是ul 的子代。 ;)
是的，我只是为暴露的问题提供了一个解决方案，这将生成所要求的代码，即使它之前违反了约定；）我也会使用类似 nth-child 的东西，但没有任何 CSS 或更多内容，很难建议
你说得对，+1 用于展示 Angular 1.2 的新功能！
非常感谢，我用过这个，效果很好 :) 我不使用 nth:child 因为 IE8

【解决方案2】：

这里的问题不在于角度，而在于您的标记结构。 ul 标签通常应该只包含 li 标签作为子标签。

为了解决您的问题，我将坚持使用您已有的 ng-repeat 并使用 css 创建分隔符。类似的东西：

<ul class="blog list">
    <li ng-repeat="post in postsJSON" class="blog entry">
        <h2>{{post.title}}</h2>
        <p>{{post.message}}</p>
    </li>
</ul>

CSS：

.blog.entry {
  border-bottom : 1px solid black // or whatever color
  ...
}

或者如果您需要对分隔符进行更多控制，请使用 css :after 并执行类似

的操作

.blog.entry:after {
  content : "";
  ...
 }

如果不熟悉:以后可以看看there

【讨论】：