让 ng-repeat 数据出现在 4 列中答案

【问题标题】：Get ng-repeat data to appear in 4 columns让 ng-repeat 数据出现在 4 列中
【发布时间】：2016-05-19 13:58:23
【问题描述】：

我正在使用 ng-repeat 从 Db 获取数据列表到视图。为了一次选择多个值，我使用了清单模型。我的代码如下，

<div ng-repeat="item in items">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

这将返回一个长长的列表，一个在另一个之下。我需要的是让列表中的这些数据显示在 4 列中。请帮忙！

【问题讨论】：

标签： angularjs ng-repeat checklist-model

【解决方案1】：

Working Demo

这就是你要找的。希望能解决您的问题。

 <div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+1]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+2]}}</div>
</div>

输出：

【讨论】：

这仍然会在单列中返回值。我希望 4 列中的数据均分。这样做是将值添加到行中
@TharinduSenanayake 单列是什么意思？ Check this plnkr。我添加了表格边框。它在三个单独的列中显示数据。 div 可以呈现类似的输出。
是的，尝试向范围对象添加另外 3 个值。然后它在 6 列中返回 6 个值。我想要的是在前 3 个值下分别添加到前 3 列的另外 3 个值
@TharinduSenanayake 编辑了答案。希望能解决您的问题。
我以前用过这个。但是当我使用清单模型时，这不起作用。有解决办法吗？

【解决方案2】：

您可以在想要连续使用的元素上使用 display:inline-block。根据您的需求，您可以通过不同的方式将它们放置在该行中。

<div ng-repeat="item in items" style="display:inline-block;">
  <input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

【讨论】：

我遇到的问题是没有将数据放入一行。我希望将数据分为 4 列。我有大约 1000 个数据值。我希望它们分 4 列，每列 200 个数据
抱歉，错过了您的评论。看起来你想水平遍历，所以你可以使用 $index 和 modulo (% 4) 来查看你是否在行的末尾和 ng-if a
。如果是我，我会使用 CSS 而不会使用 JS 来做一些在 CSS 中使用 nth-of-type 或类似的东西并不难做到的事情。