Bootstrap 两列布局和 ng-repeat (angularjs)答案

【问题标题】：Bootstrap two column layout and ng-repeat (angularjs)Bootstrap 两列布局和 ng-repeat (angularjs)
【发布时间】：2015-11-14 09:45:55
【问题描述】：

我正在尝试使用 ng-repeat 创建一个两列布局。

<div class="row">
   <div class="col-md-6" ng-repeat="item in items">
       Item: {{item}}
   </div>
</div>

这会导致以下问题：

附：这个问题之前已经用原生 CSS cols 解决了，但我想用 bootstrap 来解决。

附：下面提出的解决方案不起作用.. 请问有人有其他想法吗？

【问题讨论】：

标签： javascript css angularjs html twitter-bootstrap

【解决方案1】：

您必须将其分成两个单独的列，但之后应该很容易：

<div class="row">
   <div class="col-md-6" ng-repeat="item in items | limitTo: items.length /2: 0">
       Item: {{item}}
   </div>
   <div class="col-md-6" ng-repeat="item in items | limitTo: items.length /2: items.length /2">
       Item: {{item}}
   </div>   
</div>

【讨论】：

谢谢！正是我想要的那种解决方案，因为一切都在视图中处理！
嗨，有没有办法将其扩展到 3、4 列？我知道我总是可以输入“col-md-4”并将限制更改为 items.length / 3，但我认为可以使用具有可变数量 cols 的嵌套 ng-repeats 来做到这一点！
附注对不起还有一件事..我认为 items.length /2，得到 Math.floor 并且它遗漏了最后一个元素。可以给它加+1吗？
请看这个 plunkr：plnkr.co/edit/GdV116QqeawGpVOTHI25?p=preview 有 5 个项目，但它只呈现前四个？
你是对的，应该可以通过加 1 来解决这个问题。plnkr.co/edit/jkG6B51OBcvXsTNeOz8H?p=preview

【解决方案2】：

为此，我占用了两张桌子保持引导样式

<table> <tr ng-repeat="cl in codelist" ng-if="$index<codelist.length/2">
                            <td>{{$index}}</td>

                        </tr></table>
<table> <tr ng-repeat="cl in codelist" ng-if="$index>=codelist.length/2">
                            <td>{{$index}}</td>

                        </tr></table>

它按 ordey 显示顺序 1 3 2 4 5 6 像这样

【讨论】：