Patrick Lorio Patrick Lorio - 6 months ago 21
AngularJS Question

Group ng-repeat items

I have an array of items

items
.

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

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>


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?

Thanks in advance.

Answer

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>

Demo: http://bootply.com/86855