使用ng-options和angular来显示带有键和值的select选项并设置默认值

Question

我有以下json：

[
    {"country": "United States", "code": "US"},
    {"country": "Canada", "code": "CA"},
    {"country": "Mexico", "code": "MX"}
 ]

我认为我有

 <select ng-model="selectedCountry" name="selectedCountry" id="selectedCountry" ng-options="country.country as country.country for country in countries" ng-change="onCountryChange()" required></select>

我可以在控制器中设置默认国家/地区，但唯一的问题是下拉菜单如下所示

 <option value="0" selected="selected">United States</option>
 <option value="1">Canada</option>
 <option value="2">Mexico</option>

当我在ng-options中按country.code添加track时，我会正确获取选择列表并正确设置了值

 <option value="?" selected="selected"></option>
 <option value="US">United States</option> 
 <option value="CA">Canada</option>
 <option value="MX">Mexico</option>

但我无法从控制器设置默认值

 $scope.selectedCountry = "Canada";

要么

    $scope.selectedCountry = "CA";

有谁知道我该如何解决这个问题。

Answer 1

使用track by表达式track by ，您可以省略任何其他属性，并设置默认值，如下所示：

$scope.selectedCountry = { code: "CA" };

希望这可以帮助。

编辑：如果您希望$scope.selectedCountry的值只是一个字符串（即'US'，'CA或'MX'），则无需使用track by ，您可以使用ng-options这个：

<select ng-model="selectedCountry" name="selectedCountry" id="selectedCountry" ng-options="country.code as country.country for country in countries" ng-change="onCountryChange()" required></select>

柱塞示例： http ://plnkr.co/edit/QBRoV09sAlufSffpPPpJ?p=preview