Angular: Empty Fiddle
http://angularjs.org/
by Adis Talic
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<table class="table table-striped table-hover display" style="cellspacing:0;width:100%">
<thead>
<tr>
<th ng-repeat="columns in tableData.table.columns.column">
{{columns.label}}
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="row in tableData.table.rows.row">
<td ng-repeat="(key,val) in row">{{val}}</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.tableData = {
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"label": "Trend ",
"-fCode": "f25",
"-value": "column2"
},
{
"-averageDemand": "Article.averageDemand",
"label": "Average Demand ",
"-fCode": "f564",
"-value": "column3"
},
{
"-warehouse": "Article.warehouse",
"label": "Warehouse ",
"-fCode": "f295",
"-value": "column4"
}
]
},
"rows": {
"row": [
{
"column1": "151110103",
"column2": "100",
"column3": "500",
"column4": "TOT"
},
{
"column1": "151110109",
"column2": "101",
"column3": "46",
"column4": "TOT"
},
{
"column1": "151110111",
"column2": "102",
"column3": "16",
"column4": "SEL"
},
{
"column1": "151110117",
"column2": "103",
"column3": "112",
"column4": "SEL"
}
]
}
}
}
}