I have several li elements that I want to distribute evenly across 3 different columns. Therefore, I need the first third of the list items to be shown in the first line, the next third in the 2nd, etc.
I know correctly that my approach is somewhat static:
<ul class="small-12 medium-4 columns"> <li ng-repeat="skill in skills.development | slice:0:10"> {{ skill.name }} </li> </ul> <ul class="small-12 medium-4 columns"> <li ng-repeat="skill in skills.development | slice:10:21"> {{ skill.name }} </li> </ul> <ul class="small-12 medium-4 columns"> <li ng-repeat="skill in skills.development | slice:21:32"> {{ skill.name }} </li> </ul>
I create 3 lines in my template and then create a custom filter that cuts the list so that I can get the first 11 elements, the next 11 elements, etc. The problem is that the number of rows in each ul is not assigned dynamically like this:
Math.ceil(skills.development.length / 3)
So, if I have more elements, I will have to manually change the number of rows. Filtering is also a problem. Imagine I'm looking for a word with 5 matches in the first column, and the second in the second column. Then I would have completely unequal column sizes. Duration should be recounted dynamically when I filter the list.
Ideally, not only the number of rows in a column is dynamically calculated, but also the number of columns. So if there are more than 15 elements, it should display three columns, but if there are only 10 elements, then 2 columns will look better (since there are only 5 elements in each of them). And if there are less than 5 elements, only one column will be displayed.
I decided that I should either try to resolve it in the view, or make some kind of helper function similar to the user filter function that I already wrote. But how can I do this?
source share