I have a sample snippet that I would like to discuss. My goal is to display a JSON object in an angular table using ng-repeat, which is being generated from my angular controller script. I have attempted the code below, but for some reason, the table is not generating and its data isn't displaying. Please help me identify the issue. You can view the Fiddle here.
I am aiming for an output similar to:
Text IND US UK AUS
No 100 200 170 50
This is the HTML structure:
<div ng-controller="TestCtrl">
</div>
And here is the app.js content:
var testmodule = angular.module('myModule', []);
testmodule.controller('TestCtrl', function ($scope) {
$scope.mydata = [{
"a": ["IND", "US", "UK", "AUS"],
"b": ["100", "200", "170", "50"],
"c": "Text",
"d": "No",
}];
var mytable= angular.element(' <div class="table-responsive"> <table class="table" ng-repeat="item in mydata track by $index"> <thead> <tr> <td>{{item.c}}</td><td ng-repeat="c1 in item.a track by $index">{{c1}}</td></tr></thead> <tbody> <tr> <td>{{p.d}}</td><td ng-repeat="d1 in p.b track by $index">{{d1}}</td></tr></tbody> </table> </div>');
console.log("mytable: "+JSON.stringify(mytable));
});