AngularJS ng-repeat grouped 2 dimensional

Question

what I'm trying to do is using the ng-repeat directive to iterate some kind of 2 dimensional in angularjs

I have a long list, that I want to display in an html table with lets say 4 per row.

I'm currently using a somekind workaround to do this by doing so:

<table>
    <tr>
        <td data-ng-repeat="x in my.list.slice(0, 4)">
           {{x}}
        </td>
    </tr>
    <tr>
        <td data-ng-repeat="x in my.list.slice(4, 8)">
           {{x}}
        </td>
    </tr>
    <tr>
        <td data-ng-repeat="x in my.list.slice(8, 12)">
           {{x}}
        </td>
    </tr>
    <tr>
        <!-- -->
    </tr>
</table>

I'm wondering if there is somekind of itterating on <tr> but having everytime 4 * <td> ?

Possible duplicate of [Angular ng-repeat add bootstrap row every 3 or 4 cols](https://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols) — Claies, Dec 07 '17 at 05:14

CohenD · Accepted Answer · 2017-12-07T07:58:14.577

So for the 'tr', you want it to to be generating one 4th the amount of the array length since there will be 4 'td' in each. Then just using the index you calculate the point in the array you need for the td.

<table>
    <tr data-ng-repeat="x in my.list.slice(0, my.list.length/4) track by $index">
        <td data-ng-repeat="x in my.list.slice($index*4, $index*4+4)">
           {{x}}
        </td>
    </tr>
</table>

Edit: The above only works for arrays exactly divisible by 4, If you need something which will accommodate possibly half filled rows, the following should work.

<table>
    <tr data-ng-repeat="x in my.list.slice(0, (my.list.length/4)+1) track by $index" ng-if="myArr%4 !== 0">
        <td data-ng-repeat="x in my.list.slice($index*4, $index*4+4)">
            {{x}}
        </td>
    </tr>
    <tr data-ng-repeat="x in my.list.slice(0, my.list.length/4) track by $index" ng-if="myArr%4 === 0">
        <td data-ng-repeat="x in my.list.slice($index*4, $index*4+4)">
           {{x}}
        </td>
    </tr>
</table>

score 0 · Answer 2 · answered Dec 07 '17 at 00:03

I have one solution for you, might be better ones there but this will work fine.

First you make two dimensional array from your array (i.e. using reduce) and then just display it with ng-repeat on tr and td:

JS - I used simple 1,2,3,4,5,6,...etc. array:

let mylist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
$scope.mylist = mylist.reduce((prevVal, currVal, index) => {
    if (!prevVal[Math.floor(index / 4)]) {
      prevVal[Math.floor(index / 4)] = [];
    }
    prevVal[Math.floor(index / 4)].push(currVal);
    return prevVal;
  }, []);

it might not look so nice but it does job very good and will create array of first four elements like [[1,2,3,4], [5,6,7,8]] basically grouping elements.

After that you just need to loop through entire list like here:

<table>
      <tr ng-repeat="x in mylist">
        <td ng-repeat="num in x">
          {{num}}
        </td>
      </tr>
    </table>

And you will get table of every fourth element in one table row.

Oh, forgot my fiddle: https://jsfiddle.net/pegla/b0pckLgh/

I hope this is helpful, Cheers.

AngularJS ng-repeat grouped 2 dimensional

2 Answers2