Question

我有两个选择输入，第一个包含countryName，我想根据所选的CountryName（即所选国家/地区的stateName）将StateName填充到第二个选择输入。

我从countryData绑定countryName，从State Data绑定State，但我希望StateData包含基于所选国家/地区的项目

 <select ng-model="selectedItem.CountryId" class="form-control"
                                ng-options="item._id as item.CountryName for item in countryData">
                            <option value="">Select</option>                                

                          </select>

<select ng-model="selectedItem.StateId" class="form-control"
                                    ng-options="item._id as item.StateName for item in stateData">
                                <option value="">Select</option>                                

                              </select>

以下是我的stateData的外观

[
  {
    "StateName": "State1",
    "CountryName": "Country1",
  },
  {
    "StateName": "State2",
    "CountryName": "Country1",
  },
  {
    "StateName": "State3",
    "CountryName": "Country2",
  },
  {
    "StateName": "State4",
    "CountryName": "Country3",
  },
  {
    "StateName": "State5",
    "CountryName": "Country2",
  },
  {
    "StateName": "State6",
    "CountryName": "Country3",
  }
]

Answer 1

您可以禁用第二个下拉列表，直到选择第一个下拉列表。您还需要更改JSON，以便状态位于数组中。第二个下拉列表仅在您选择国家/地区后才会填充，然后将启用。 - 更新

<select ng-options="item.country for item in list" ng-model="selectedCountry"></select>
<select ng-disabled="selectedCountry === {}" ng-options="item.state for item in selectedCountry.states" ng-model="selectedState"></select>

https://jsfiddle.net/Kratos_SA/hjz27yb0/3/

AngularJs根据第一个下拉列表填充第二个下拉列表

1 个答案: