AngularJS多个列中如何动态地分割清单 [英] AngularJS how to dynamically split list in multiple columns

问题描述

我有一些项目里，我想均匀地分布在3个不同的列分布。所以，我需要在第一UL要显示的列表项的第一个三分，接下来的第三第二UL等。

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>

创建模板中的3行，然后我创建了一个切片列表，以便我能获得第11个元素，接下来的11个元素等等自定义过滤器。问题是，行中每微升的数目并不动态分配像这样：

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)

所以，如果我有更多的元素，我将手动更改的行数。过滤是一个问题为好。想象一下，我搜索一个单词在第一列一个在第2列5场比赛和。然后我会在完全不均衡列大小。长度应该是动态重新计算，当我过滤列表。

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.

理想情况下，不仅在一列中的行数是动态计算的，但也列数。所以，不如说，如果有更多的15个元素，应该呈现三列，但如果只有10个元素2列会更好看（因为在每个只有5元）。如果有低于5元件只有一列将被渲染。

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?

推荐答案

为每列创建一个列阵列开始和结束值，并通过所有的数据使用嵌套中继循环和渲染正常。

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>

全部plnkr这里：<一href=\"http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=$p$pview\">http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=$p$pview

这篇关于AngularJS多个列中如何动态地分割清单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！