Terra Nuva Terra Nuva - 2 months ago 30
AngularJS Question

How to separate multiple elements in a ng-repeat?

I am making a site that uses ng-repeat to display two directives and an element. the second directive and the element are both shown after x number of "repeats" (using index). These directives are rectangular cards that display from left to right and until the screen is full and then move to the next line as shown in this screen shot:

Correct placement

The white rectangles being the first directive and the black rectangles being the second directive and element. The problem I'm facing is that if the black rectangle is supposed to be the first item on a new line it will remove the last white rectangle from the line above and show up before the black rectangle on the next line. Really what's happening is the two directives inside of the ng-repeat are getting bundled together and not separating when there isn't space on one line for both of them. Here is an example of what I mean:

enter image description here

Alright, so on to my code. This is my html for the ng-repeat.

<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>


As you can see, the card-info directive (white rectangles) shows up every time, while the ad-info directive (black rectangles) only show up every adFrequency number of times.

Here is my CSS. I am using less, so it's formatted a bit differently:

.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;
}


Is there any way I can "unbundle" those so to speak?

Note: I tried making a jsfiddle, but the project is just too large with to many things going to get everything working right. I've already removed as much as I could just so I could make this post.

Answer

You can try to use ng-repeat-start and ng-repeat-end.

Something like:

<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>

Here you can read more https://docs.angularjs.org/api/ng/directive/ngRepeat

Comments