angularjs ng-repeat可靠的selectBox

时间:2017-06-08 07:26:20

标签: javascript angularjs combobox ng-options

我想让我的选择框可靠,所以,如果我选择地区"美国",第二个选择框应该只显示纽约,但我不知道如何制作它,我尝试在我的选项中使用ng-click,但它不起作用。而我无法更改我的数据库类型,我需要使用它,所以任何人都知道如何在不更改任何数据库结构的情况下进行更改?



UIAppearance

var app = angular.module('app', []);
  
app.controller('ctrl', function($scope) {
$scope.countryList=[];
	$scope.data =[
	{id:1, country_code:"KR", country_name:"Korea", city_name:"Busan", city_code:"PUS"},
	{id:1, country_code:"KR", country_name:"Korea", city_name:"Seoul", city_code:"SEL"},
	{id:1, country_code:"KR", country_name:"Korea", city_name:"Ulsan", city_code:"USN"},
	{id:1, country_code:"KR", country_name:"Korea", city_name:"GwangJu", city_code:"KWJ"},
	{id:1, country_code:"KR", country_name:"Korea", city_name:"Gunsan", city_code:"KUV"},
	{id:1, country_code:"USA", country_name:"America", city_name:"New York", city_code:"NY"}
	];
  
  
 			for (var i = 0; i < $scope.data.length; i++) {
 				var isExist = false;
 				for (var j = 0; j < $scope.countryList.length; j++) {
 					if (JSON.stringify($scope.data[i].country_code) == JSON.stringify($scope.countryList[j].country_code)) {
 						isExist = true;
 						break;
 					}
 				}
 				if (isExist == false) {
 					$scope.countryList.push($scope.data[i]);
 				}
 			}
});
      
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您可以根据第一个下拉列表的country_code在第二个下拉列表中应用过滤器。我还替换了下拉列表以使用ng-options。另外,您应该考虑在每个选择框中添加ng-model

<select class="small_select" ng-model="selectedRegion" 
  ng-options="country.country_name as country_code for in countryList">
  <option disabled selected hidden>Region</option>
</select>

<select class="big_select" ng-model="selectedCity"
 ng-options="city.city_code as city.city_name for city in data | filter: {country_code: selectedRegion }">
  <option disabled selected hidden>Detailed information</option>
</select>