如何基於另一個下拉列表中的選定值填充其他下拉列表中的值

Question

我有4個下拉框。

即城市，劇院，showtime，showdate。

目前我的代碼填充vlaues一樣，根據選擇的城市

它填充戲劇，showdate相似和Showtime值。

我想要做什麼是

基於slected城市填充影院

然後在該slected影院baesd在Showtime和showdate相似填充值。

這是怎麼實現的？

在HTML

<div class="form-group col-lg-12" ng-class="{ 'has-error' : bookticket.city.$invalid && (bookticket.city.$dirty || submitted)}"> 
 
        <label>Select City</label> 
 
        <select name="city" class="form-control" 
 
          ng-model="city" 
 
          ng-options="city for city in cityList" 
 
          ng-required="true" > 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t <option value="">Select </option> 
 
        </select> 
 
\t \t \t \t <span class="help-block" ng-show="bookticket.city.$invalid && bookticket.city.$error.required && (bookticket.city.$dirty || submitted)" >City Name is required.</span> 
 
     </div> 
 
\t \t 
 
\t \t <div class="form-group col-lg-12" ng-class="{ 'has-error' : bookticket.theater.$invalid && (bookticket.theater.$dirty || submitted)}"> 
 
        <label>Select Theater </label> 
 
        <select name="theater" class="form-control" 
 
          ng-model="theater" 
 
          ng-options="theater for theater in selectedtheater" 
 
          ng-required="true"> 
 
\t \t \t \t \t \t <option value="">Select </option> 
 
        </select> 
 
\t \t \t \t <span ng-show="bookticket.theater.$invalid && bookticket.theater.$error.required && (bookticket.theater.$dirty || submitted)" class="help-block">Theater Name is required.</span> 
 
     </div> 
 
\t \t 
 
     <div class="form-group col-lg-6" ng-class="{ 'has-error' : bookticket.showdate.$invalid && (bookticket.showdate.$dirty || submitted)}"> 
 
        <label>Select Show Date </label> 
 
        <select name="showdate" class="form-control" 
 
          ng-model="showdate" 
 
          ng-options="showdate for showdate in selectedshowdate" 
 
          ng-required="true"> 
 
\t \t \t \t \t \t <option value="">Select </option> \t 
 
        </select> 
 
\t \t \t \t <span ng-show="bookticket.showdate.$invalid && bookticket.showdate.$error.required && (bookticket.showdate.$dirty || submitted)" class="help-block">Show Date is required.</span> 
 
     </div> 
 
\t \t 
 
\t \t <div class="form-group col-lg-6" ng-class="{ 'has-error' : bookticket.showtime.$invalid && (bookticket.showtime.$dirty || submitted)}"> 
 
        <label>Select Show Time </label> 
 
        <select name="showtime" class="form-control" 
 
          ng-model="showtime" 
 
          ng-options="showtime for showtime in selectedshowtime" 
 
          ng-required="true"> 
 
\t \t \t \t \t <option value="">Select </option> \t \t 
 
        </select> 
 
\t \t \t \t <span ng-show="bookticket.showtime.$invalid && bookticket.showtime.$error.required && (bookticket.showtime.$dirty || submitted)" class="help-block">Show Time is required.</span> 
 
     </div> 
 
\t \t 
 
\t \t

控制器代碼

$scope.cityList = [ 
 
         'BANGLORE', 
 
         'TUMKUR', 
 
\t      'MYSORE' 
 
         ]; 
 
         
 
$scope.theaterList = [ 
 
         { name:'BANGLORE',values: ['ABC THEATER (BANGLORE,RAJAJINAGAR)','DEF THEATER (BANGLORE,VIJAYNAGAR)'] }, 
 
         { name:'TUMKUR', values: ['HOME THEATER (TUMKUR,TUMKUR STREET)'] }, 
 
\t      { name:'MYSORE', values: ['MYSORE THEATER (MYSORE ROAD, MYSORE)'] } 
 
         ]; 
 
    
 
    $scope.city = ""; 
 
    $scope.theater = ""; 
 
    $scope.selectedtheater =[]; 
 
    $scope.$watch('city', function(newValue) { 
 
      for (var i = 0; i < $scope.theaterList.length; i++){ 
 
       if ($scope.theaterList[i].name === newValue){ 
 
       $scope.selectedtheater = $scope.theaterList[i].values; 
 
       } 
 
      } 
 
      }); 
 
      
 
      
 
    $scope.showdateList = [ 
 
         {name:'BANGLORE', values: ['1-MAR-2017','2-MAR-2017','3-MAR-2017'] }, 
 
         {name:'TUMKUR', values: ['10-APR-2017','11-APR-2017'] }, 
 
\t      {name:'MYSORE', values: ['13-JUNE-2017','14-JUNE-2017'] } 
 
         ]; \t \t \t \t 
 
\t \t \t \t \t 
 
    
 
    $scope.city = ""; 
 
    $scope.showdate = ""; 
 
    $scope.selectedshowdate =[]; 
 
    $scope.$watch('city', function(newValue) { 
 
      for (var i = 0; i < $scope.showdateList.length; i++){ 
 
       if ($scope.showdateList[i].name === newValue){ 
 
       $scope.selectedshowdate = $scope.showdateList[i].values; 
 
       } 
 
      } 
 
      }); 
 
    
 
    
 
    
 
$scope.showtimeList = [ 
 
         {name:'BANGLORE', values: ['10 AM','11 AM','2 PM'] }, 
 
         {name:'TUMKUR', values: ['9 AM','10 AM','4 PM'] }, 
 
\t      {name:'MYSORE', values: ['9 AM','3 PM'] } 
 
         ]; 
 
\t 
 
$scope.city = ""; 
 
    $scope.showtime = ""; 
 
    $scope.selectedshowtime =[]; 
 
    $scope.$watch('city', function(newValue) { 
 
      for (var i = 0; i < $scope.showtimeList.length; i++){ 
 
       if ($scope.showtimeList[i].name === newValue){ 
 
       $scope.selectedshowtime = $scope.showtimeList[i].values; 
 
       } 
 
      } 
 
      }); \t 
 

Answer 1

首先你會需要按照你的城市劇院的大多數事情。日期必須與您的劇院相同，因爲城市中的劇院沒有必要在所有日期顯示電影。時間將基於日期和劇院，因爲每個劇院一天可以有不同數量的節目。我爲劇院數據創建了$scope.theaterTime。我已經創建了演示在這裏：

https://plnkr.co/edit/lZIMdTaDEiBgbvh34mJ5?p=preview

這將正常工作，如果你有一個劇院少量數據。如果你有劇院的大數據，建議在初始化時，你將調用API獲取城市列表，然後在選擇城市時，你將調用API獲取該城市的劇院，On Theatre選擇，你將調用API要獲得可用於劇院的日期和基於日期，您將獲得可用的時間段。

我給出的解決方案是針對少量的數據。如果你有成千上萬的數據，我建議你做上面提到的事情。因爲，如果您在一次調用中調用API來獲取大量數據，顯然它會影響性能，但需要花費很多時間來響應。

謝謝&注意。

Answer 2

您可以使用ng-change像w ^如果你選擇了一個城市ng-change=selectTheaterByCity()叫，在這個功能，你可以選擇只獲得theaterList和像你一樣可以調用另一個ng-change=selectDateByTheater()獲取日期列表等。