Separate ng-repeat every 3 positions

Question

Using AngularJS, I am repeating a JSON object containing an array of event objects containing an array of competition objects.

I want to show each event in a table, and then each competition in td , but only three cells in a row

I use ng-repeat to return a list of tables for each event, but I am having problems splitting contests into a new <tr> every three <td> s

Besides rebuilding my own massive object from JSON, what is the best way to do what I am describing in Angular?

---

Current view:

 <table ng-repeat="listing in listings"> <tr> <th colspan="3">{{listing.name}}</th> </tr> <tr> <td ng-repeat="competition in listing.competitions"> {{competition.id}} - {{competition.name}} </td> </tr> </table> 

Desired conclusion:

 <table> <tr> <th colspan="3">Event Name</th> </tr> <tr> <td>competition id - competition name</td> <td>competition id - competition name</td> <td>competition id - competition name</td> </tr> <tr> <td>competition id - competition name</td> <td>competition id - competition name</td> <td>competition id - competition name</td> </tr> </table> 

---

Controller:

 app.controller('EventsCtrl', function ($scope, $http) { $scope.loading = true; $http.get('scripts/JSON/events.json').then(function (response) { var listings = response['data'].events; $scope.listings = listings; }); }); 

events.json

 { "events": [ { "id": 418, "name": "et ullamco", "competitions": [ { "id": 933, "name": "qui in deserunt occaecat et", "startTime": 1381092189 }, { "id": 853, "name": "eu enim ex incididunt do", "startTime": 1380708266 }, { "id": 5738, "name": "ad est ut aliquip et", "startTime": 1381366623 }, { "id": 7599, "name": "sit ex voluptate aliqua dolor", "startTime": 1381284106 }, { "id": 7481, "name": "laborum consequat deserunt do aliqua", "startTime": 1380874273 }, { "id": 3441, "name": "amet reprehenderit sint sunt proident", "startTime": 1380554850 }, { "id": 1959, "name": "ullamco minim minim in voluptate", "startTime": 1380651981 } ] }, 

Answer 1

You are using a table, but the semantics of your data indicate that you have a list of lists. You should consider outputting this using <ul><li> instead of the grid.

 <ul ng-repeat="listing in listings"> <li> <h2>{{listing.name}}</h2> <ul ng-repeat="competition in listing.competitions"> <li> {{competition.id}} - {{competition.name}} </li> </ul> </li> </ul> 

You can easily achieve your desired layout using CSS using the above HTML. Check out “block gratings” on Twitter Bootstrap or Foundation for an example. Tables should usually be used only for data that is actually tabular.

But...

You doubt that you are still not responding, as there may be other reasons to alternate the patterns as you suggest. You can use the function to get three things at a time:

 <table ng-repeat="listing in listings"> <tr> <th colspan="3">{{listing.name}}</th> </tr> <tr ng-repeat="group in competitions"> <td ng-repeat="competition in group"> {{competition.id}} - {{competition.name}} </td> </tr> </table> 

In your controller, you can create a “list of lists” for linking to nested repeaters

 // Adapted from Fresheyeball solution $scope.competitions = [] compSet = [] for(var i; i < $scope.listings.competitions; i++){ var competition = $scope.listings.competitions[i]; if( i % 3 ){ $scope.competitions.push(compSet); compSet = []; } compSet.push(competition); }