获取 ng-repeat 数据以显示在 4 列中

Question

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

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

这将 return 一长串列表。我需要的是让列表中的这些数据显示在 4 列中。请帮忙！

Answer 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>

输出：

Answer 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>

获取 ng-repeat 数据以显示在 4 列中

Get ng-repeat data to appear in 4 columns

angularjs

ng-repeat

checklist-model