從json使用下拉列表中填充表格

Question

我正在製作一個帶有公交時間表的小型web應用程序項目。我試圖使用dropdowns從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...) 

嵌入式Plunker

Answer 1

當您選擇大巴，SelectedN r不是所選元素的索引，而是數組中的整個子元素，因此對於每個busData[selectedNr]，您不需要ng-repeat，但僅適用於每個selectedNr。

以下是HTML中main部分的更正版本。你的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>