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
– LoïcR, Commented Apr 13, 2017 at 21:37

Matt Catellier · Accepted Answer · 2017-04-13 21:39:58Z

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, 2017 at 21:39

Matt Catellier

8682 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Will C Over a year ago

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.

Matt Catellier Over a year ago

oh great, thanks for updating our question. if adding repeat to <tr> creates a new row, adding repeat to <td> will create more rows within that column. :)

Will C Over a year ago

Sorry again Matt, I think what I should mean to ask is. Can I group <td> within a div somehow. Because I want this all within one row

Will C Over a year ago

stackoverflow.com/questions/21644493/… I found something I think! Thanks guys

cnorthfield Over a year ago

@user3007703 Check my answer, I believe it's much simpler than the question you have referenced.

cnorthfield · Accepted Answer · 2017-04-13 22:19:52Z

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>

Collectives™ on Stack Overflow

Angular: Table with multiple columns added per repeated element

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related