<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Reading</title>
<!--AngularJS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<!--Angular UI-Router-->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js">
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JavaScript code -->
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="myApp" class="container-fluid">
<div ui-view>
</div>
</body>
</html>
(function () {
'use strict';
var app = angular.module('myApp', ['ui.router', 'myAppControllers']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
name: 'HomePage',
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
;
$urlRouterProvider.otherwise('/home');
});
})()
;
(function() {
'use strict';
angular.module('myAppControllers', [])
.controller('HomeController', function($scope, $http) {
$scope.studentData = [{
"students": {
"Student1": {
"number": "15",
"books": {
"Mystery": [
"Book1",
"Book2"
]
}
},
"Student2": {
"number": "12",
"books": {
"Romance": [
"Book1"
],
"Adventure": [
"Book1",
"Book2"
]
}
},
"Student3": {
"number": "116",
"books": {}
}
},
"class": "7th Grade",
"school": "High School 1"
}];
});
})()
;
<div class="container-fluid">
<div class="container">
<div class="row">
<div>
<table class="table table-striped">
<thead>
<tr>
<th>School</th>
<th>Class</th>
<th>Student</th>
<th>Student-Number</th>
<th>Books</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in studentData">
<td>
{{ data.school }}
</td>
<td>
{{data.class}}
</td>
<td>
<table class="table">
<tbody>
<tr ng-repeat="(student, details) in data.students">
<td>
{{student}}
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table">
<tbody>
<tr ng-repeat="(student, details) in data.students">
<td>
{{details.number}}
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" ng-repeat="student in data.students">
<tr ng-repeat="(genre, books) in student.books">
<td>
{{genre}} : {{books}}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>