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

Question

所以我手上有点头疼。

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

小部件可调整大小，有三种可用大小。前两个只有足够宽，可以有一列元素，所以以正确的顺序显示它们是微不足道的。但是，当窗口小部件扩展到两倍宽度时，更多元素以50％的宽度显示。这些元素默认使用display:inline-block; float: left排列，这意味着我最终得到了从左边开始的排序 - ＆gt;是的，而我需要它们垂直排序。

最初我执行了两次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或其简写columns：

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