沒有 html 元素的 ng-repeat

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>

因此，在每 2 個列表項之后，我就有一個跨度來調整我接下來的 2 個框。 現在我有這個角度代碼。

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

而且我不知道如何在每第二個列表項之后生成該跨度。 提前謝謝你，丹尼爾！

Answer 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 參數添加了一個條件，僅顯示每隔一個范圍

Answer 2

這里的問題實際上並不在於 angular，而在於標記的結構。 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 你可以看看那里