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

我有一个依赖下拉列表，我选择一个国家。如果选择了哥伦比亚，我需要在默认情况下标记为“manizales”，如果选择了美国，则标记为“Chicago”（美国）。我尝试了很多东西，但不知道如何标记第一次的默认选项

<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”缺陷

---

一个选项是对国家/地区输入使用

ng change

，并在更改时分配

$scope.selectedState

。我还建议在每个国家/地区添加一个

defaultStateId

属性，使其更灵活

因此，您的国家将成为：

<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>

---

您可以使用

ng change

进行以下更改。

选择
部门：
选择

更换 ng model=“selectedState”

用下面的代码

---

ng model=“（国家|筛选：{'id'：selectedCountry}）[0]。状态[0]”

2您需要做的事情：

1） 将

ng更改

添加到

selectedCountry

下拉列表中，该下拉列表将

selectedState

模型设置为列表中的第一个状态

2） 重新排列json中的状态，使默认状态为第一个状态

---

您还可以扩展它，将默认值添加到国家/地区列表或将默认布尔值添加到状态对象。

您只需添加一个“defaultIndex”：每个父元素0

var Aplic=角度模块（“Aplic”，[]）

应用控制器（'CountryCntrl'，功能（$scope）{

---

}))

我改变了一些东西，它现在可以工作了：。@user6188402也许我不明白我的意思。当第一个下拉列表加载时，我需要一个国家，例如哥伦比亚，一旦这个国家被标记为“manizales”，请再次查看我的plunker；）也许我不理解我。当第一个下拉列表加载时，我需要一个国家/地区，例如哥伦比亚，一旦这个国家/地区被标记为“manizales”缺陷。哦，好的，添加

$scope.selectedCountry=$scope.countries[0]$scope.selectedState=$scope.selectedCountry.states[0].id

在您声明

$scope.countries

阵列后，如果我选择了，则不会选择“Manizales”，可能是因为我不明白自己的意思。我需要在第一个下拉列表加载时显示一个国家/地区，例如哥伦比亚，并且一旦该国家/地区标记为“manizales”缺陷。如果我保留/$scope.selectedCountry='1'，则该国家/地区有效；在js中。

$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;
        }
    }
};

<select id="country" ng-model="selectedCountry" ng-options="country as country.name for country  in countries" ng-change='selectedState = selectedCountry.states[0].id;'>
    <option value="">Choose</option>
</select>Departement:
<select id="state" 
ng-model="selectedState" 
ng-options="state.id as state.dep for state in selectedCountry.states">
    <option value="">Choose</option>
</select>

$scope.countries = [{
    'id': '1',
    'name': "Colombia",
    'defaultIndex': 0,
    'states': [{
        'id': '12',
        'dep': "Manizales"
    }, {
        'id': '11',
        'dep': "Bogota"
    }]
}, {
    'id': '2',
    'name': "USA",
    'defaultIndex': 1,
    'states': [{
        'id': '3',
        'dep': "California"
    }, {
        'id': '15',
        'dep': "Chicago"
    }]
}];

$scope.selectedCountry = $scope.countries[0];