使用带角度的ng-options显示带键和值的选项,并设置默认值

时间:2014-08-12 16:59:46

标签: javascript angularjs angularjs-ng-options

我有以下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添加曲目时,我正确地获取了正确设置的选择列表

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

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

1 个答案:

答案 0 :(得分:2)

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

示例Plunker: http://plnkr.co/edit/QBRoV09sAlufSffpPPpJ?p=preview