通过 ng-repeat 将 N 个元素排序到列中

Question

所以我手上有点head-scratcher。

我正在使用 ng-repeat 输出位于小部件内的项目列表。

小部件可调整大小，具有三种可用尺寸。前两个的宽度只够容纳一列元素，因此以正确的顺序显示它们很简单。但是，当小部件扩展到两倍宽度时，更多元素会显示在宽度的 50% 处。默认情况下，元素使用 display:inline-block; float: left 排列，这意味着我最终的顺序是从左 -> 右，而我需要它们垂直排列。

最初我执行了两个 ng-repeats，每个都用一个列包装，使用 splice 来拆分结果，但这会导致排序问题，因为每组元素仅相对于其容器列排序.

下面是其中一个小部件的一些精简代码：

<div class="item review" ng-repeat="review in reviews | orderBy:'date':true | limitTo:14">
  <div class="header">
    ...
  </div>
 <div class="body">
  <div class="comment">
    <p>{{review.comments}}</p>
  </div>
</div>

我很乐意将 ng-if 与 $index 比较一起使用，例如 ng-if="($index+1)==7" 我想在组之前插入的元素，但由于 ng-repeat 是在物品本身上，我不能用那种方法包裹它们。

到目前为止，我已经尝试过各种想法，但没有真正成功。我可以在 Angular 之外做一些事情，但它很乱，我想留在 Angular 之内，我确信我所追求的是可能的。有人能救救我吗？

编辑：说明我的意思

Answer 1

工作经验： http://plnkr.co/edit/lP3vc57k98gPUEbShHWT

您可以使用 css3 column-count 或其 shorthand columns:

ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

通过 ng-repeat 将 N 个元素排序到列中

Ordering N elements into columns, via ng-repeat

javascript

angularjs

angularjs-ng-repeat