Заполнение таблицы данными из json с помощью выпадающих меню

Question

Я создаю небольшой проект веб-приложения с таблицами времени шины. Я пытаюсь заполнить таблицу данными из json, используя выпадающие меню. Я не знаю, правильно ли выполняю часть json, но я застрял в анализе данных, чтобы таблица отображала правильные времена для выбранной шины и останавливалась.

Он должен выглядеть следующим образом: выберите номер шины, выберите остановку автобуса, затем в таблице появятся правильные времена.

HTML выберите часть:

Bus No.: <select ng-model="selectedNr" ng-options="x for (x,y) in busData"></select> 

Stop name: <select ng-model="selectedStop" ng-options="x for (x,z) in selectedNr.stops"></select> 

Затем стол:

<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> 

Угловая часть:

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] 
        } 
       ] 

      } 
     } 
    }, (and so on...) 

Embeded Plunker

Answer 1

При выборе шины, то SelectedN r не является индексом выбранного элемента, а всего подэлемента в массиве, поэтому вам не нужно ng-repeat для каждого busData[selectedNr], но только для каждого selectedNr.

Вот исправленная версия части main в вашем HTML. С вашим JSON нечего менять.

<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 selectedStop.time"> 
      <th>{{time.hour}}</th> 
      <td ng-repeat="minute in time.minutes">{{minute}}</td> 
     </tr> 
    </table> 
</main>