AngularJSを使用してオブジェクトの配列をドロップダウンしてフィルタリングする

Question

私は、APIに由来する以下のデータ構造を持っています。

$scope.cityList = [{ 
"_id": { 
    "$oid": "584ebd7f734d1d55b6dd4e5e" 
}, 
"cityName": "New York", 
"region": "north", 
"people": [ 
    { "id": 1, "name": "x" }, 
    { "id": 2, "name": "y" }, 
    { "id": 3, "name": "z" }, 
    { "id": 4, "name": "a" }, 
    { "id": 5, "name": "b" }, 
    { "id": 6, "name": "c" } 
] 
}, 
{ 
"_id": { 
    "$oid": "584ebd7f734d1d55b6dd4e5e" 
}, 
"cityName": "New Jersey", 
"region": "South", 
"people": [ 
    { "id": 1, "name": "x" }, 
    { "id": 2, "name": "y" }, 
    { "id": 3, "name": "z" }, 
    { "id": 4, "name": "a" }, 
    { "id": 5, "name": "b" }, 
    { "id": 6, "name": "c" } 
] 
}] 

私はドロップダウンセットアップしようとしています：

• 最初のものはcityNames
• の一覧を表示する第2の選択した都市からのすべての人々namesの一覧を表示します。

また、選択したユーザー名のidを変数に保存します。

<select ng-model="city"> 
    <option ng-repeat="city in cityList" value="{{city.cityName}}">{{city.cityName}}</option> 
</select> 

<select ng-model="selectedItem"> 
    <optgroup ng-repeat="option in cityList | filter: city"> 
     <option ng-repeat="x in option.people">{{x}}</option> 
</select> 

Answer 1

あなたはng-optionsを使用する必要があります：

`cityList`が定義されている

<select ng-model="selectedCity" 
     ng-options="c as c.cityName for c in cityList"> 
</select> 

<select ng-model="selectedPerson" 
     ng-options="p as p.name for p in selectedCity.people"> 
</select> 

Demo on JSFiddle.