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

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

1 个答案: