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?
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>