<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta name="theme-color" content="#346">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-app="timeTable" ng-controller="ngCtrl">
<header class="header">
<h2>Bus timetable</h2>
<nav>
<i class="material-icons hamburger-nav"></i>
</nav>
</header>
<main class="content">
<section class="filter-wrapper">
<h2>Bus No.:
<span><select ng-model="selectedNr" ng-options="x for (x,y) in busData"></select></span>
</h2>
<h4>Stop name: <span><select ng-model="selectedStop" ng-options="x for (x,z) in selectedNr.stops"></select></span>
</h4>
</section>
<table class="time-table">
<tr ng-repeat="time in busData[selectedNr].stops[selectedStops].time">
<th>{{time.hour}}</th>
<td ng-repeat="minute in time.minutes">{{minute}}</td>
</tr>
<!-- This part just to roughly show the outcome that I want -->
This part just to roughly show the outcome that I want
<tr>
<th>hour1</th>
<td>minute</td>
<td>minute</td>
<td>minute</td>
<td>minute</td>
</tr>
<tr>
<th>hour2</th>
<td>minute</td>
<td>minute</td>
<td>minute</td>
<td>minute</td>
</tr>
<!-- -->
</table>
</main>
</div>
<script src="mainController.js"></script>
</body>
</html>
var app = angular.module("timeTable", []);
app.controller("ngCtrl", function ($scope) {
"use strict";
$scope.busData = {
"bus1":{
"id":1,
"stops":{
"stop1":{
"id":1,
"stopName":"stop1",
"time":[
{
"hour": 1,
"minutes": [11, 21,31,41,51]
},
{
"hour": 2,
"minutes": [12, 22,32,42,52]
}
]
},
"stop2":{
"id":2,
"stopName":"stop2",
"time":[
{
"hour": 3,
"minutes": [11, 21,31,41,51]
},
{
"hour": 4,
"minutes": [12, 22,32,42,52]
}
]
}
}
},
"bus2":{
"id":2,
"stops":{
"stop1":{
"id":1,
"stopName":"stop1",
"time":[
{
"hour": 5,
"minutes": [11, 21,31,41,51]
},
{
"hour": 6,
"minutes": [12, 22,32,42,52]
}
]
},
"stop2":{
"id":2,
"stopName":"stop2",
"time":[
{
"hour": 7,
"minutes": [11, 21,31,41,51]
},
{
"hour": 8,
"minutes": [12, 22,32,42,52]
}
]
}
}
}
};
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root{
--bg: #fafafa;
--text: #333;
--c500: #607D8B;
--c50: #ECEFF1;
--yellow: #FFF59D;
}
body{
font-family: 'Roboto', sans-serif;
background: var(--bg);
color: var(--text)
font-size: 1em;
-webkit-font-smoothing: antialiased;
}
select{
}
.header{
height: 50px;
background: var(--c500);
color: #fff;
padding: 10px;
}
.header h2{
text-transform: uppercase;
line-height: 1;
}
.hamburger-nav {
position: absolute;
cursor: pointer;
right: 7px;
top: 13px;
}
.filter-wrapper{
padding-left: 10px;
display: block;
margin: 7px 0;
}
.filter-wrapper h2{
display: inline-block;
font-weight: 400;
}
.filter-wrapper h4{
font-weight: 400;
color: #424242;
margin-left: 10px;
display: inline-block;
}
.filter-wrapper span select{
font-family: inherit;
color: inherit;
display: inline-block;
font-weight: bold;
text-align: center;
background: none;
border: 0;
vertical-align: text-bottom;
border-bottom: 2px solid var(--c500);
border-radius: 0;
-webkit-appearance: none;
min-width: 30px;
padding-left: 5px;
}
.filter-wrapper h2 span select{
padding-left: 5px;
font-size: 22px;
}
.filter-wrapper h4 span select{
font-size: 16px;
padding: 0;
overflow: hidden;
max-width: 129px;
}
input, select:focus{
outline: 0;
}
.time-table{
border-collapse: collapse;
width: 100%;
cursor: default;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.time-table tr{
background: #fff;
}
.time-table tr:nth-child(even){
background: var(--c50);
}
.time-table th, .time-table td{
display: inline-block;
width: auto;
height: 25px;
line-height: 25px;
}
.time-table th{
text-align: right;
border-right: 1px solid #CFD8DC;
padding-right: 3px;
}
.time-table td{
text-align: center;
font-weight: 300;
}
.time-table .special{
background-color: var(--yellow);
}
footer{
position: absolute;
bottom: 0;
width: 100%
}