使用下拉列表从JSON数据填充表

Question

我正在制作一个带有公交时刻表的小型Web应用程序项目。 我试图使用下拉列表中的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...)

嵌入式柱塞

Answer 1

选择总线时，SelectedNr不是选定元素的索引，而是数组中整个子元素的索引，因此您无需为每个busData[selectedNr]进行ng-repeat ，而只需为每个selectedNr进行ng-repeat 。

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