ng-repeat，没有HTML元素

ng-repeat without an html element

本文关键字：元素 HTML 没有 ng-repeat      更新时间：2023-09-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>

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

使用

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 参数添加了一个条件，仅显示每隔一个跨度

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

为了解决您的问题，我将坚持使用您已经拥有的ng重复并使用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 : "";
  ...
 }

如果你不熟悉：之后你可以看看那里

相关文章：