Updated with angular code snippet (for demonstration purposes only)
I have been exploring ways in AngularJS to automatically wrap columns into rows after a certain number of columns while keeping the index intact.
<div class="row">
{{for (var i = 0; i < list.length; i++ ) { }}
<div class="col-4">list[0].name</div>
{{ } }}
Here's an equivalent approach in PHP:
To summarize:
<div class="row">
<?php
$collection = array( 'item1',
'item2',
'item3',
'item4',
'item5',
);
for($i = 0; $i < count($collection); $i++ ) : ?>
<div class="col-4">
<?php echo $collection[$i] ?>
</div>
<?php if(($i + 1) % 3 === 0) :?>
</div> <!-- close row -->
<div class="row"><!-- open new row -->
<?php endif ?>
<?php endfor ?>
</div> <!-- close final row -->
I am aware that this can be achieved within a controller and then injected back into the DOM through a link function, but this approach seems less than ideal. I feel like there might be a better way, but I am struggling with conditionally adding the closing div before the opening one.
P.S. While I considered using Underscore.js for the example, I opted for a more universal solution.