Render json in table using AngularJs
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<table cellpadding="0" cellspacing="0" ng-show="IsVisible">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
<th>Orders</th>
</tr>
<tbody ng-repeat="c in Customers">
<tr>
<td>{{c.ID}}</td>
<td>{{c.Type}}</td>
<td>{{c.Transaction}}</td>
<td>{{c.Price}}</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Id</th>
<th>Freight</th>
<th>ShipCountry</th>
</tr>
<tbody ng-repeat="o in c.OpenHouses">
<tr>
<td>{{o.Date}}</td>
<td>{{o.StartTime}}</td>
<td>{{o.EndTime}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.IsVisible = false;
$scope.GenerateTable = function () {
$scope.Customers = [
Listing:{
ID: 1, Type: "Exclusive", Transaction: "Rent", Price: 100000,
OpenHouses: [
{ Date: "15/10/2020", StartTime:"8:00" , EndTime: "14:00" },
{ Date: 14/10/2020, StartTime: "9:00", EndTime: "15:00" },
{ Date: 15/10/2010, StartTime: "8:00", EndTime: "14:00" }
]
},
Listing:{
ID: 2, Type: "Open", Transaction: "Sale", Price: 100000,
OpenHouses: [
{ Date: "15/10/2020", StartTime:"8:00" , EndTime: "14:00" },
{ Date: "14/10/2020", StartTime: "9:00", EndTime: "15:00" },
{ Date: "15/10/2010", StartTime: "8:00", EndTime: "14:00" }
]
}
];
$scope.IsVisible = true;
};
});