Angularjs複数のドロップダウンメニューからの動的テーブル

Question

私は2つの選択入力を持っています。これはコントローラから取得するオプションです。これら両方の入力が選択されている場合、特定のデータを持つテーブルが必要です。この場合は、バス番号とバス停を選択する必要があります。その後、1時間ごとに時間と分が表に表示されます。私はAngularには新鮮なので、これに取り組む方法は本当に分かりません。 https://plnkr.co/edit/U7FmkwNLbxb0bmMbV561?p=preview

マークアップ：

<div ng-app="timeTable" ng-controller="ngCtrl"> 
    <section class="content"> 
     <section class="filter-wrapper"> 
      <h2>Bus No.: 
      <span><select ng-model="selectedNo" ng-options="x for x in busNum"></select></span> 
      </h2> 
      <h4>Stop name: <span><select ng-model="selectedStop" ng-options="x for x in stopName"></select></span> 
      </h4> 
     </section> 
     <table class="time-table"> 
      <tr ng-repeat="time in time"> 
       <th>{{time.hour}}</th> 
       <td ng-repeat="minute in time.minutes">{{minute}}</td> 
      </tr> 
     </table> 
    </section> 
    <footer class="footer"> 

    </footer> 
</div> 

Javascriptを：事前に

var app = angular.module("timeTable", []); 
    app.controller("ngCtrl", function ($scope) { 
    $scope.busNum = [1, 2, 3]; 
    $scope.stopName = ["Stop1", "Stop2", "Stop3"]; 
    $scope.time = [ 
     { 
      hour: 7, 
      minutes: [num, num, num, num] 
     }, 
     { 
      hour: 8, 
      minutes: [num, num, num, num] 
     } 
     //And so on... 
    ]; 
}); 

おかげ は、これまでのところ、私はこれを持っています。

Answer 1

データモデルを変更する必要があります。 this simple plunkerを作成しました。

あなたは、バスの時刻表のためにもっと複雑なモデルを追加したことがわかります。この方法で、特定のバス番号とバス停を参照する時刻を実際に表示することができます。私の現在の例では、BusNr1とBusStop1だけが動作しますが、アイデアを得て時間を挿入することができるはずです。

また、キーと値のペアを持つオブジェクトへ

$scope.busNum = [1, 2, 3]; 
$scope.stopName = ["stop1", "stop2", "stop3"]; 

を変更するには、最終的に必要がある場合があります。