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

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