1

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

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

4

2 回答 2

2

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

您的代码将如下所示：

    <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允许您在一个标签中输入一个循环并在另一个标签中关闭它，在这种情况下，我还使用 $odd 参数添加了一个条件ng-repeat，仅显示每隔一个跨度

于 2013-09-06T09:32:42.957 回答
0

这里的问题实际上与角度无关，而更多地与标记的结构有关。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 : "";
  ...
 }

如果你不熟悉 :after 你可以看看那里

于 2013-09-06T09:27:00.797 回答