AngularJS how to dynamically split list in multiple columns

Question

I have a number of li items which I want evenly distributed across 3 different columns. So I need the 1st third of the list items to be shown in the first ul, the next third in the 2nd ul etc.

Right know 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 the 3 rows in my template and then I created a custom filter that slices the list so I can obtain the first 11 elements, the next 11 elements and so forth. Problem is that the number of rows in each ul is not assigned dynamically like so:

Math.ceil(skills.development.length / 3)

So if I have more elements I will have to manually change the number of rows. Filtering is an issue as well. Imagine that I search for a word with 5 matches in first column and one in the 2nd column. Then I would have completely uneven column sizes. The length should be recalculated dynamically when I filter the list.

Ideally not only the number of rows in a column is calculated dynamically, but also the number of columns. So if there are more than say 15 elements it should render three columns, but if there is only 10 elements 2 columns will look better (as there is only 5 elements in each). And if there are less than 5 elements only one column will be rendered.

I figured that I should either try to solve it in the view or make some sort of helper function similar to the custom filter function I already wrote. But how might I do that?

Questions about improving the code belong to codereview.stackexchange.com — Umur Kontacı
– Umur Kontacı, Commented Sep 3, 2014 at 23:43
@UmurKontacı, this is an appropriate question for stackoverflow, just the title was not good. The OP fixed the title. — Samuel Neff
– Samuel Neff, Commented Sep 3, 2014 at 23:47
Thanks, I actually did not know about code review, but since I am not just asking how to refactor my code but how to add features by making it dynamic I just changed the title. — zkwsk
– zkwsk, Commented Sep 3, 2014 at 23:48
You likely dont need to slice anything,i'm pretty sure you can fix that with CSS,depending on the css framework you are using.Change the classes according to the number of skills displayed. — mpm
– mpm, Commented Sep 4, 2014 at 0:00
Don't see how you would do that? I cannot really see any other way of making the li-items span all three ul's? It is sort of the same problem as if you have paragraphs in columns and you want the text to continue uninterrupted across columns, but you don't know exactly where the column is going to break. — zkwsk
– zkwsk, Commented Sep 4, 2014 at 0:05

Samuel Neff · Accepted Answer · 2014-10-24 00:07:36Z

9

Create a columns array with start and end values for each column and use a nested repeater to loop through all the data and render properly.

<ul ng-repeat="column in columns" class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills | slice:column.start:column.end">
    {{ skill }}
  </li>
</ul>

Full plnkr here: http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=preview

edited Oct 24, 2014 at 0:07

answered Sep 4, 2014 at 0:15

Samuel Neff

75.3k18 gold badges144 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zkwsk Over a year ago

Awesome solution! I had to tweak it a little bit to accomodate how I have nested my scope, but your example was very easy to follow. In addition I added logic to automatically determine number of columns. Here is the implementation I ended up using: gist.github.com/webconsult/e9afc4cd1c2d4eb4057d and you can check out the finished result at zkwsk.com when you go to the experience section and press "show all". Thanks!

Samuel Neff Over a year ago

@funkylaundry, glad it worked and thanks for posting a gist of what you ended up with after your tweaks.

Collectives™ on Stack Overflow

AngularJS how to dynamically split list in multiple columns

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related