Question

我有4个下拉框。

即城市，剧院，showtime，showdate。

目前，我的代码填充了像

这样的标记

基于选定的城市，它在剧院，showdate和showtime中填充价值。

我想做的是

基于选定的城市人口剧院

然后，在播出时间和showdate中选择戏剧中的价值。

如何实现这一目标？

in html

＆＃13;

<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" >
							 
					  <option value="">Select </option> 
                     </select>
				   <span class="help-block" ng-show="bookticket.city.$invalid && bookticket.city.$error.required && (bookticket.city.$dirty || submitted)" >City Name is required.</span> 
         </div>
		 
		 <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">
						 <option value="">Select </option> 
                   </select>
				  <span ng-show="bookticket.theater.$invalid && bookticket.theater.$error.required && (bookticket.theater.$dirty || submitted)" class="help-block">Theater Name is required.</span> 
         </div>
		
         <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">
						 <option value="">Select </option> 	 
                   </select>
				   <span ng-show="bookticket.showdate.$invalid && bookticket.showdate.$error.required && (bookticket.showdate.$dirty || submitted)" class="help-block">Show Date is required.</span>
         </div>
		
		 <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">
					   <option value="">Select </option> 		 
                   </select>
				<span ng-show="bookticket.showtime.$invalid && bookticket.showtime.$error.required && (bookticket.showtime.$dirty || submitted)" class="help-block">Show Time is required.</span>
         </div>

＆＃13;

控制器代码是

＆＃13;

 $scope.cityList = [
                         'BANGLORE',
                         'TUMKUR',
	                     'MYSORE'
                      ];
                      
$scope.theaterList = [
                         { name:'BANGLORE',values: ['ABC THEATER (BANGLORE,RAJAJINAGAR)','DEF THEATER (BANGLORE,VIJAYNAGAR)'] },
                         { name:'TUMKUR',  values: ['HOME THEATER (TUMKUR,TUMKUR STREET)'] },
	                     { 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'] },
	                     {name:'MYSORE',   values:  ['13-JUNE-2017','14-JUNE-2017']  }
                        ];				  
					  
 
  $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']  },
	                     {name:'MYSORE', values: ['9 AM','3 PM']  }
                      ];
	
$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;
              }
            }
          });

＆＃13;

Answer 1

根据您所在的城市，您首先需要的是剧院。日期必须与您的剧院一致，因为城市的剧院没有必要在所有日期显示电影。时间将基于日期和剧院，因为每个剧院一天可以有不同数量的节目。我为剧院数据创建了$scope.theaterTime。我在这里创建了Demo：

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

如果您的影院数据量很少，这将正常工作。如果您有大量的影院数据，建议在初始化时，您将调用API获取城市列表，然后在选择城市时，您将调用API以获取该城市的影院，在影院选择中，您将调用API为了获得剧院的日期，并根据日期，您将获得时间段。

我给出的解决方案是针对少量数据。如果您有数千个数据，我建议您做上面提到的事情。因为，如果你在一次通话中调用API来获取那么多数据，显然它会对性能产生影响，那么响应会花费很多时间。

谢谢＆amp;方面。

Answer 2

当你选择一个被调用的城市ng-change时，可以使用ng-change=selectTheaterByCity()，在此功能中你可以选择只获取theaterList，就像你可以调用另一个ng-change=selectDateByTheater()来获取日期一样清单等。

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

2 个答案: