I have a paginated list of video thumbnails that I want to showcase in a Bootstrap fluid grid. To achieve this, I am utilizing a nested ng-repeat loop to iterate through each list for pagination purposes. Within the inner loop, another ng-repeat is used to cycle through each video thumbnail in the subarray. The grid layout follows a 3x6 format, so whenever the index of the inner ng-repeat is a multiple of 5 (taking into account that $index begins at 0), my goal is to close the current fluid row and initiate a new one.
<div ng-repeat="thumbList in thumbLists">
<div ng-repeat="thumb in thumbList" class="row-fluid">
<div class="span2">
<a href="{{ thumb.URL }}">
<img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
</a>
</div>
<!-- ng-switch? -->
</div>
</div>
The arrays are populated using a REST service. When a user clicks on the 'next' button, a new array list is pushed onto the existing lists and an animation smoothly transitions across each 3x6 grid. The data structure is as follows:
$scope.thumbLists = [
[{URL: url, thumbnailURL: thumburl}, ...], // initial
[{URL: url, thumbnailURL: thumburl}, ...], // added when user clicks 'next'
... and so forth
];
Although everything is functioning correctly, I am uncertain about how to dynamically insert HTML to close a row and begin a new one once it reaches 6 thumbnails because they are provided in a single array format.
For instance, could I potentially incorporate something similar to the following within the commented ng-switch block:
<div ng-switch="$index">
<div ng-switch-when="$index % 6 == 5">
</div>
I am working with the stable 1.0.8 release and need to ensure compatibility with IE8.
A temporary fix involves eliminating the left margin for elements that appear as the first item in their respective rows:
<div ng-repeat="thumbList in thumbLists">
<div class="row-fluid">
<div ng-repeat="thumb in thumbList" class="span2" ng-class="{nomargin: $index % 6 == 0}">
<a href="{{ thumb.URL }}">
<img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
Ultimately, I would like to explore a solution where I can conditionally add or remove HTML, possibly by incorporating a directive.