使用下拉菜单用来自 json 的数据填充 table

Question

我正在制作一个总线时间为 tables 的小型 Web 应用程序项目。我正在尝试使用下拉菜单将来自 json 的数据填充到 table。我不知道 json 部分是否正确，但我一直在解析数据，以便 table 显示正确的 select 公交车时间和停车时间.

它必须这样走：select公交车号码，select公交车站，然后在table下面显示正确的时间。

HTML select 部分：

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:

<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

当您 select 总线时，SelectedNr 不是 selected 元素的索引，而是数组中的整个子元素，因此您不需要 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>

使用下拉菜单用来自 json 的数据填充 table

Populate table with data from json using dropdowns

javascript

json

angularjs

ng-repeat

ng-options