ng-repeatで複数の要素を分割する方法は？

Question

ng-repeatを使用して2つのディレクティブと要素を表示するサイトを作っています。 2番目のディレクティブと要素は、x回の繰り返し（インデックスを使用）の後に表示されます。これらの指示は、画面このスクリーンショットに示すように、次の行に移動し、次に完全となるまで、左から右に表示し、矩形状のカードである：

白い長方形は、第一指令及びブラックであります長方形は第2の指示と要素です。私が直面している問題は、黒い矩形が新しい行の最初の項目であると仮定されている場合、上の行から最後の白い矩形を削除し、次の行の黒い矩形の前に現れます。実際に何が起きているのかは、ng-repeatの内部にある2つのディレクティブがバンドルされ、両方のために1つの行にスペースがないときに分離しないということです。ここで私が何を意味するかの例は次のとおりです。

さて、その上私のコードに。これはng-repeatのHTMLです。

<div ng-repeat="acqui in acquis" class="repeated"> 
    <card-info class="card" acqui="acqui" ng-style=""></card-info> 
    <ad-info class="ad-style" ng-if="!(($index + 1) % adFrequency)"></ad-info> 
    <div class="ad-spacing" ng-if="!(($index + 1) % adFrequency)"></div> 
</div> 

あなたが見ることができるように広告情報ディレクティブ（黒い長方形が）のみ回のあらゆるadFrequency番号を表示しながら、カード情報指令（白の長方形）は、すべての時間を示しています。

ここは私のCSSです。私はあまり使用していますので、それは少し異なるフォーマットです：

.card { 
    .shadow; 
    width: 350px; 
    height: 530px; 
    display: inline-table; 
    background-color: white; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    margin: 0 10px 20px 12px; 
} 
.ad-style { 
    position: relative; 
    .ads { 
     position: absolute; 
     .shadow; 
     width: 350px; 
     height: 530px; 
     display: inline-table; 
     background-color: black; 
     margin: 6px 0 0 8px; 
    } 
} 
.ad-spacing { 
    width: 350px; 
    display: inline-table; 
    margin: 0 10px -5px 10px; 
} 

私は「UNBUNDLE」ものはいわばことができます任意の方法はありますか？

注：jsfiddleを作成しようとしましたが、プロジェクトが大きすぎて、すべてが正しく機能するようにはなりません。私はすでに私がこの投稿をすることができるようにできるだけ多くを削除しました。

Answer 1

ng-repeat-startとng-repeat-endを試すことができます。

何かのように：ここで

<div ng-repeat-start="acqui in acquis" class="repeated"> 
    <card-info class="card" acqui="acqui" ng-style=""></card-info> 
</div> 
<div ng-repeat-end class="repeated" ng-if="!(($index + 1) % adFrequency)"> 
    <ad-info class="ad-style"></ad-info> 
    <div class="ad-spacing"></div> 
</div> 

あなたは読むことができ、よりhttps://docs.angularjs.org/api/ng/directive/ngRepeat