twitter-bootstrap - 分组 ng-repeat 项目

Question

我有一组元素 items .

我想使用 ng-repeat 指令或类似指令来分组 n项目在一起。例如:

我要 items=['a', 'b', 'c', 'd', 'e', 'f', 'g']以 3 个一组的形式呈现，呈现为:

<div class="row">
   <div class="col-sm-4">a</div>
   <div class="col-sm-4">b</div>
   <div class="col-sm-4">c</div>
</div>
<div class="row">
   <div class="col-sm-4">d</div>
   <div class="col-sm-4">e</div>
   <div class="col-sm-4">f</div>
</div>
<div class="row">
   <div class="col-sm-4">g</div>
</div>

我知道我可以做一些处理来转 items进入 items=[['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]但是我想知道 anuglarjs 是否有支持来解决这个问题。可以？如果没有，你会怎么做呢？

提前致谢。

Answer 1

你可以像这样使用“ng-repeat”..

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items">
        <span ng-switch on="$index % 3">
            <span ng-switch-when="0">
                <div class="row">
                    <div class="col-sm-4" ng-show="items[$index+0]">{{items[$index+0]}}</div>
                    <div class="col-sm-4" ng-show="items[$index+1]">{{items[$index+1]}}</div>
                    <div class="col-sm-4" ng-show="items[$index+2]">{{items[$index+2]}}</div>
                </div>
            </span>
        </span>
    </div>
</div>

演示: http://bootply.com/86855