Question

我是角度js的新手。我想制作一个包含两个下拉菜单的页面。一个用于国家和其他用于城市。我想根据所选国家/地区制作过滤器下拉菜单。我想根据下拉菜单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

使用autoComplete文本框填充下拉列表

1 个答案: