I plan to implement a demo to show how affectedly add columns to the table in AngularJS.
as i have download the sample code from this page A Step-by-Step Guide to Your First AngularJS App
when i run the following sample code. i will get a list of driver informtions in rows
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
here is the screen shot of the output
the above example will show you the number of rows depending on the
total records being loaded from data source.
If I want to transpose the table or support dynamically add columns to the table in other words.
i will have to have the ng-repeat property attribute in the table column TD tag.
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr> <td ng-repeat="driver in driversList">
<table><tr>
<td>{{$index + 1}}</td></tr><tr>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td></tr>
<tr> <td>{{driver.Constructors[0].name}}</td></tr>
<tr><td>{{driver.points}}</td>
</tr></table>
</td>
</tr>
</tbody>
</table>
then the output will like this
if you have a better approach on how to dynamically add collumns to table in AngularJS
please let me know