AngularJS如何动态地将列表拆分为多列

我有许多 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 个，则只会呈现一列。

我认为我应该尝试在视图中解决它，或者制作某种类似于我已经编写的自定义过滤器函数的辅助函数。但我该怎么做呢？

创建一个包含每列的开始值和结束值的列数组，并使用嵌套重复器循环遍历所有数据并正确渲染。

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