集团NG重复项目 [英] Group ng-repeat items

问题描述

我有一个项目数组项目。

我想用NG-重复指令或类似的东西，到组 N 物品放在一起。例如：

I would like to use the ng-repeat directive or something similar, to group n items together. For instance:

我想项目= ['一'，'B'，'C'，'D'，'E'，'F'，'G'] 在3组被渲染待渲染为：

I would like items=['a', 'b', 'c', 'd', 'e', 'f', 'g'] to be rendered in groups of 3 to be rendered as:

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

我知道我可以做一些处理转项目到项目= ['A'，'B'，'C']， ['D'，'E'，'F']，['G'] 不过，我在想，如果有anuglarjs支持来解决这个问题。可以？如果没有，你将如何去这样做？

I know I could do some processing to turn items into items=[['a', 'b', 'c'], ['d', 'e', 'f'], ['g']] however I was wondering if anuglarjs had support to get around this. Does it? If not, how would you go about doing this?

先谢谢了。

推荐答案

您可以用`NG重复这样的..

You can use `ng-repeat' like this..

<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

这篇关于集团NG重复项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！