Wednesday, June 25, 2014

How to transpose the table in AngularJS

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}}&nbsp;{{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}}&nbsp;{{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


2 comments:

  1. can you please help me to Transpose SharePoint list view using JSON/JQUERY?

    ReplyDelete
  2. XLS web part or new list view should help you done the job

    ReplyDelete