iterate over chunks of an array using ng-repeat

Question

My controller grabs people from the server:

$scope.people = [person1, person2, person3, person4, person5,...]

My template needs to display

Answer 1

Here is my current solution (It's O(N^2) so doesn't scale for large lists).

Template:

<div ng-app="myapp">
    <div ng-controller="testing">
        <div ng-repeat="_ in items">
            <span ng-show="($parent.$index % 3 == 0) && ($parent.$index + 3 > $index) && ($parent.$index <= $index)" ng-repeat="item in items">
                <span ng-show="1">
                    {{item}}
                </span>
            </span>
        </div>
    </div>
</div>

Controller:

angular.module('myapp', []);

function testing($scope){
    $scope.items = ['a', 'b', 'c', 'd','e','f','g'];
}

Result:

a b c
d e f
g

Fiddle:

http://jsfiddle.net/LjX3m/

Conclusion:

I'll probably try use CSS for this as @aaronfrost mentions. (However it may not be possible since some wrapping divs may be required for each chunk).

Answer 2

After years of angular experience, It's obvious that the best way to do this is to split the array into chunks in the controller. Each time the original array is modified, update the chunked array.

Answer 3

There isn't an existing way to do what you are saying with a table. The easiest way to do what you want is to use divs with fixed widths, so that they will auto-wrap after three.

Here is an example:

HTML

<div ng-app="app">
    <div ng-controller="TableCtrl" class="my-table">
        <span ng-repeat="person in people" class="person">{{person}}</span>
    </div>
</div>

CSS

.my-table{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

.person{
    width: 100px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid black;
}

JavaScript

var app = angular.module('app',[]);
app.controller('TableCtrl', function($scope){

    $scope.people = ['Aaron', 'Abraham', 'Adam', 'Aristotel', 'Aziel', 'Azod', 'Azood'];

});

Working copy: http://jsfiddle.net/ZX43D/