angularjs ng-repeat dependable selectBox

Question

私は選択領域を信頼できるものにしたいので、地域 "アメリカ"を選択すると、2番目のselectBoxはニューヨークのみ表示する必要がありますが、どのように作成するのかわかりません私のオプションの中でng-clickを使用しようとしますが、動作しません。そして私は自分のデータベースタイプを変更することはできません。私はそれを使用する必要があります。誰もデータベース構造を変更せずにそれを作る方法を知っていますか？

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

<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>

Answer 1

あなたは第一のドロップダウンの選択のcountry_codeに基づいて2番目のドロップダウンの上にフィルタを適用することができます。また、ドロップダウンの代わりに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>