In the $scope there is a dynamic array and in the HTML template, there are three columns. The goal is to render elements from the array in the HTML like this:
<div class="first-column">
<div><!--element of (index + 3) % 3 === 0 will be placed here--></div>
</div>
<div class="second-column">
<div><!--element of (index + 3) % 3 === 1 will be placed here--></div>
</div>
<div class="third-column">
<div><!--element of (index + 3) % 3 === 2 will be placed here--></div>
</div>
It's important to note that the three columns should only appear once. Each element needs to be placed in a specific column based on its index matching the given expression.
While it is possible to use three separate ng-repeat declarations to achieve this, for better performance, I am seeking a solution that involves just a single ng-repeat.
If you have any suggestions or ideas, please feel free to share them. Thank you!