Angular: Table with multiple columns added per repeated element

Question

Is it possible to create a table with multiple columns via an ng-repeat?

I'm not sure there is a more eloquent way to ask, so below I've posted a sample template of sorts. This does not work since the surrounding div breaks the table.

For example:

<table>
  <tr>
    <div ng-repeat="num in [1,2,3]">
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>Avg</td>
    </div>
  </tr>

Expected Output:

<table>
  <tr>
    <td>1</td> <td>2</td> <td>3</td> <td>Avg</td>
    <td>1</td> <td>2</td> <td>3</td> <td>Avg</td> 
    <td>1</td> <td>2</td> <td>3</td> <td>Avg</td> 
  </tr>
</table>

Could you provide us more details? Your question couldn't be more unclear. Expected output, set of datas, etc. — LoïcR, Apr 13 '17 at 21:37

score 2 · Answer 1 · answered Apr 13 '17 at 21:39

2

yes it totally is possible. you just dont need a div. :p

<table>
  <tr ng-repeat="s in Subjects">
    <td>{{ s.name }}</td>
    <td>{{ s.address }}</td>
  </tr>
</table>

hope this gets ya rolling!

answered Apr 13 '17 at 21:39

Matt Catellier

838
2
12
19

But this will create a new table row. Suppose I want them all in the same row: see my edits for a sort of desired outcome. – Will C Apr 13 '17 at 21:43
oh great, thanks for updating our question. if adding repeat to creates a new row, adding repeat to will create more rows within that column. :) – Matt Catellier Apr 13 '17 at 21:45
Sorry again Matt, I think what I should mean to ask is. Can I group within a div somehow. Because I want this all within one row – Will C Apr 13 '17 at 21:52
http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap I found something I think! Thanks guys – Will C Apr 13 '17 at 21:56
@user3007703 Check my answer, I believe it's much simpler than the question you have referenced. – cnorthfield Apr 13 '17 at 22:53

score 0 · Accepted Answer · answered Apr 13 '17 at 22:19

Of course this is possible. To get your expected output, simply use the special repeat start and end points ng-repeat-start and ng-repeat-end:

// app.js
(function() {

  'use strict';

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

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = [];

  function MainController() {


  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as MainCtrl">
  <table>
    <tr>
      <td ng-repeat-start="num in [1,2,3]">1</td>
      <td>2</td>
      <td>3</td>
      <td ng-repeat-end>Avg</td>
    </tr>
  </table>
</div>

This is exactly what I was looking for! Thanks – Will C Apr 14 '17 at 14:45 — Will C, Apr 14 '17 at 14:45

Angular: Table with multiple columns added per repeated element

2 Answers2