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

Question

我有许多 li 项目，我希望它们均匀分布在 3 个不同的列中。所以我需要在第一个 ul 中显示列表项的第 1/3，在第二个 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 个，则只会呈现一列。

我想我应该尝试在 View 中解决它，或者创建某种类似于我已经编写的自定义过滤器函数的辅助函数。但是我该怎么做呢？

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