AngularJS如何在多列中动态拆分列表

Question

我有很多li项目,我想在3个不同的列中均匀分布.所以我需要在第一个ul中显示列表项的前三分之一,在第二个ul中显示下一个三分之一等.

知道我的方法有点静态:

<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个元素等等.问题是每个ul中的行数不是动态分配的,如下所示:

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

因此,如果我有更多的元素,我将不得不手动更改行数.过滤也是一个问题.想象一下,我搜索第一列中有5个匹配而第二列中有一个匹配的单词.那么我的柱尺寸会完全不均匀.当我过滤列表时,应该动态重新计算长度.

理想情况下,不仅动态计算列中的行数,还会计算列数.因此,如果有超过15个元素,它应该呈现三列,但如果只有10个元素,则2列将看起来更好(因为每个元素中只有5个元素).如果少于5个元素,则只渲染一列.

我想我应该尝试在视图中解决它,或者做一些类似于我已经编写的自定义过滤器函数的辅助函数.但是我该怎么做呢？

Answer 1

创建一个包含每列的起始值和结束值的列数组,并使用嵌套的转发器循环遍历所有数据并正确呈现.

<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:http://plnkr.co/edit/AMWLvB045UJmNamp8vdz？p = preview