javascript - 使用下拉列表使用 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>

Angular 部分:

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

当您选择总线时，SelectedNr 不是所选元素的索引，而是数组中的整个子元素，因此您不需要为每个 进行 ng-repeat BusData[selectedNr] 但仅针对每个 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>