Question

我正在尝试使用以下代码加载角度“select”

<select class="span11" ng-model="user.countryOfResidence" ng-options="c.option as c.value for c in countries" required>

它将数据加载到select中，但默认选择的值为空。

我的国家/地区数组是

$scope.countries = [{option:'TL', value:'TIMOR-LESTE'},
{option:'TK', value:'TOKELAU'},
{option:'TJ', value:'TAJIKISTAN'},
{option:'TH', value:'THAILAND'},
{option:'TG', value:'TOGO'},];

如果我将'TL'更改为'TIMOR-LESTE'，（“option”和“value”的相同字符串）则可以正常工作。任何人都可以告诉我我的代码有什么问题。

用户对象是

$scope.user = {

        countryOfResidence : $scope.countries[0].value

    };

Answer 1

使用ng-options填充的select会将ng-model字段设置为指定为值的字段，而不是选项

在您给出的示例中，您将user.countryOfResidence设置为countries [0] .value，在这种情况下为'TIMOR-LESTE'，但值键为'TL'，因此它赢了' t默认选择它。

为了更好的可读性，我总是喜欢使用'label'和'value'键来构建我的选择选项，如下所示：

// Controller

$scope.countries = [
  {value:'TL', label:'TIMOR-LESTE'},
  {value:'TK', label:'TOKELAU'},
  {value:'TJ', label:'TAJIKISTAN'},
  {value:'TH', label:'THAILAND'},
  {value:'TG', label:'TOGO'}
];

$scope.user = {
        countryOfResidence: $scope.countries[0].value
    };
};

// View

<select class="span11" ng-model="user.countryOfResidence" ng-options="c.value as c.label for c in countries" required=""></select>

angularjs：选择不同（键，值）不能正常工作

1 个答案: