Question

我正在尝试生成一个博客列表，但我遇到了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>

所以在每两个列表项之后，我有一个跨越我的下两个框的范围。现在我有这个角度代码。

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

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

Answer 1

这里的问题不是真正的角度，而是更多的标记结构。 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

ng-repeat没有html元素

1 个答案: