使用自動完成文本框填充下拉列表

Question

我是新角js。我想用兩個下拉菜單創建一個頁面。一個用於國家和其他城市。我想根據所選國家/地區製作過濾器下拉菜單2.我想根據選擇的下拉列表2自動填充我的文本框（我的意思是城市下拉）。 任何人都可以幫我嗎？

Answer 1

那麼，您需要選擇國家，並根據您選擇的國家，您需要在其他下拉菜單中顯示城市列表？這是我的代碼。
HTML模板代碼

<div ng-app> 
    <h2>CitiCountry</h2> 
    <div ng-controller="CitiCountry"> 
     <div class="col-xs-10 col-xs-offset-0 col-sm-6 col-md-2 col-md-offset-0"> 
     <select class="form-control" ng-model="searchcountry" ng- options="co.country for co in countryList |orderBy:'country'"> 
      <option value="">Select Country</option> 
     </select> 
     </div> 
     <div class="col-xs-10 col-xs-offset-0 col-sm-6 col-sm-offset-2 col-md-2 col-md-offset-0"> 
     <select class="form-control" ng-model="searchCity" ng-options="ci.city for ci in citiesList | filter:searchcountry | orderBy:'city'"> 
     <option value="">Select City</option> 
     </select> 
     </div> 
    </div> 
    </div> 

JS代碼

function CitiCountry($scope) { 
$scope.countryList=[{"country":"Pakistan"},{"country":"India"}] 
    $scope.citiesList=[{"city":"mumbai","country":"India"}, 
         {"city":"banglore","country":"India"}, 
         {"city":"Islamabad","country":"Pakistan"}, 
         {"city":"Delhi","country":"India"}]; 
    $scope.$watch('searchcountry', function() { 
     $scope.searchState = null; 
    }); 
    $scope.$watch('searchState', function() { 
     $scope.searchCity = null; 

    }); 
} 

下面是小提琴Demo