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

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

使用下拉列表填充来自json的数据表

1 个答案: