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 could define your own filter:

app.filter('inGroupsOf', function() {
  var memoized = {};

  return function() {
    key = Array.prototype.slice.call(arguments);
    if (typeof memoized[key] === "undefined") {
      memoized[key] = _inGroupsOf.apply(this, arguments);
    }

    return memoized[key];
  };

  function _inGroupsOf(collection, group_size) {
    var ar = [];
    var i, j;

    for (i = 0, j = -1; i < collection.length; i++) {
      if (i % group_size == 0) {
        j++;
        ar[j] = [];
      }

      ar[j].push(collection[i]);
    }

    return ar;
  }
});

It uses memoization to prevent Error: 10 $digest() iterations reached. Aborting!

Answer 2

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 3

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.