angularjshtml-tableangularjs-ng-repeat

ng-repeat vertically and horizontally in a table when receiving dynamic data


I am trying to display data in a table.
Rows and columns are dynamic.
I want to use ng-repeat.

I am receiving data in this form:

headers: [
  0: {"heading1"},
  1: {"heading2"},
  2: {"heading3"}
]
data: [
  0:{ id:1, code:"Barry" , description:"Allen" }
  1:{ id:2, code:"Naruto" , description:"Uzumaki" }
  2:{ id:3, code:"Hannah" , description:"Montana" }        
] 

I tried this way :

<thead>
  <tr>
    <td ng-repeat="c in headersData">
      {{c}}
    </td>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="c in columnData">
    <td>{{c.id}}</td>
    <td>{{c.code}}</td>
    <td>{{c.description}}</td>
  </tr>
</tbody>

But it's not rendering the thead.
Any solution?


Solution

  • var app = angular.module('testApp',[])
    app.controller('MainController',function($scope) {
       $scope.headersData =  [
     "heading1",
     "heading2",
     "heading3"
    ];
     $scope.columnData =  [
      { id:1, code:"Barry" , description:"Allen" },
      { id:2, code:"Naruto" , description:"Uzumaki" },
      { id:3, code:"Hannah" , description:"Montana" }        
    ] ;
    });
    <!DOCTYPE html>
    <html ng-app="testApp">
    
    <head>
      <script data-require="angular.js@*" data-semver="4.0.0" 
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
      </script>
      <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
    </head>
    
    <body ng-controller="MainController">
     <table>
      <tr>
        <th ng-repeat="th in headersData">{{th}}</th>
      </tr>
      <tr ng-repeat="x in columnData">
        <td>{{x.code}}</td>
      </tr>
    </table>
    </body>
    
    </html>