CODEWITHSUNDEEP
angularjs
Will C
Will C

Reputation: 3

Angular: Table with multiple columns added per repeated element

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>

Upvotes: 0

Views: 519

Answers (2)

cnorthfield
cnorthfield

Reputation: 3501

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>

Upvotes: 0

Matt Catellier
Matt Catellier

Reputation: 858

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!

Upvotes: 2

Related Questions