我想让我的选择框可靠,所以,如果我选择区域“美国”,第二个选择框应该只显示纽约,但我不知道如何制作它,我尝试使用 ng-click在我的选项内,但它不起作用。我无法更改我的数据库类型,我需要使用它,所以有人知道如何在不更改任何数据库结构的情况下实现它吗?
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]);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="port_small_select_div">
<select class="small_select">
<option disabled selected hidden>Region</option>
<option ng-repeat="country in countryList" value="{{ country.country_code }}">{{ country.country_name}}</option>
</select>
</div>
<div class="port_select_div">
<select class="big_select">
<option disabled selected hidden>Detailed information</option>
<option ng-repeat="city in data" value="{{ city.city_code }}">{{ city.city_name}}</option>
</select>
</div>
</div>
最佳答案
您可以根据第一个下拉列表的选择的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>
关于javascript - angularjs ng-repeat 可靠的 selectBox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44429249/