如何基于另一个下拉列表中的选定值填充其他下拉列表中的值

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()获取日期列表等。