Angularjs选择使用ng-options

时间:2015-03-19 10:15:48

标签: javascript angularjs

我想使用具有2个选择输入的状态来过滤城市 当第一个选择更改它时,第二个应该根据第一个选择进行更改。

我有一系列项目:

$scope.items = [
     {
         name:'state1',
         cities : [
              {id:1,name:'city1'},
              {id:2,name:'city2'},
         ]
     },
     {
         name:'state2',
         cities : [
              {id:1,name:'city1'},
              {id:2,name:'city2'},
         ]
     },
];

我尝试了这个,但它不起作用: 首先是州:

<select ng-model="state" ng-options="s.id as s.name in states"  ></select>

城市第二:

<select ng-model="city" ng-options="s.cities.id as s.cities.name for s in items | filter:{s.name:state}" ></select>

1 个答案:

答案 0 :(得分:3)

第一个下拉列表选择整个国家/地区对象。第二个下拉列表的选项是所选国家/地区的城市:

<select class="country" ng-model="selectedCountry" ng-options="country.name for country in items">
    <option value="">Choose country</option> 
</select>

<select ng-if="selectedCountry" class="city" ng-model="selectedCity" ng-options="city.name for city in selectedCountry.cities">
    <option value="">Choose city</option> 
</select>

<强> Fiddle