Group ng-repeat items

Question

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 1

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

Answer 2

AFAIK there is no grouping directives in angular.

A solution is to group the data (underscore.js is good for this) and then have nested ng-repeats in the view.