javascript - 在依赖于 ANGULAR.JS 的下拉列表中选择默认选项

Question

我有一个从属下拉菜单，我选择了一个国家。如果选择哥伦比亚，我需要默认标记为“马尼萨莱斯”，如果选择美国(美国)，则需要标记为“芝加哥”。我已经尝试了很多东西，但不知道如何将第一次标记为默认选项。

<select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country  in countries track by country.id">
    <option value="">Choose</option>
</select>Departement:
<select id="state" 
ng-model="selectedState" ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
    <option value="">Choose</option>
</select>

可能是我没看懂吧。加载第一个下拉列表时，我需要一个国家/地区，例如哥伦比亚，一旦出现“manizales”缺陷标记

http://plnkr.co/edit/6gvGmfqIqEAyYtYyYIb8?p=preview

Answer 1

一种选择是在国家/地区输入上使用 ng-change 并在更改时分配 $scope.selectedState。我还建议为每个国家/地区添加一个 defaultStateId 属性，以使其更加灵活。

因此您所在国家/地区的 HTML 将变为:

<select id="country" ng-change="CountrySelected()" ng-model="selectedCountry" ng-options="country.id as country.name for country  in countries track by country.id">
    <option value="">Choose</option>
</select>

您的 CountrySelected 函数看起来像这样:

$scope.CountrySelected = function() {
    var countryId = $scope.selectedCountry;
    for (var i = 0; i < $scope.countries.length; ++i) {
        var country = $scope.countries[i];
        if (country.id === countryId) {
            $scope.selectedState = country.defaultStateId;
            break;
        }
    }
};