ng-select无法识别ng-model是有效的选项，应选择

Question

我有一个角度应用程序，其中包含一个带有选择的表单。 我可以选择其中之一，并在模型中完美地对其进行更新。 但是下一次我以它的形式应该被“预先填充”，因为数据已经存在。 并且所有数据都可以正常填充，但是角度似乎无法识别出模型的值与选择的值相对应。

HTML /角：

<select ng-model="userData.country" 
        ng-options="country as country.name for country in countries">
</select>

数据

[
  {"iso":"DK","name":"Danmark"},
  {"iso":"DE","name":"Germany"}
]

所需的行为是，一旦将数据设置为userData.country，该表单将被预先选择用户在先前表单中选择的正确国家/地区。

Answer 1

在您的HTML中，您需要添加country.iso而不是country

<select ng-model="userData.country" 
     ng-options="country.iso as country.name for country in countries">
</select>

而在您的控制器中

$scope.userData = {"country":"DK"}; // this can be filled with prefilled data. which can be fetched from db or stored in a service

Answer 2

如果您想保存整个对象而不是仅保存iso代码，请参见以下示例：

http://jsfiddle.net/2ES4t/

JS文件：

$scope.countries = [{
  iso: "DK",
  name: "Danmark"
}, {
  iso: "DE",
  name: "Germany"
}];
$scope.userData = {};
$scope.userData.country = $scope.countries[0];

HTML档案：

<select ng-model="userData.country" ng-options="country as country.name for country in countries"></select>

我建议存储整个对象，如果您需要名称并且仅具有ISO代码，则以后不必搜索country数组。

Answer 3

您可能未按Angular Way填写表格。

为此，您应该设置模型（表格将被预先填写）：

在您的控制器中：

$scope.countries = [
  {"iso":"DK","name":"Danmark"},
  {"iso":"DE","name":"Germany"},
  {"iso":"PT","name":"Portugal"},
  {"iso":"CN","name":"Canada"}
];

$scope.userData = {};
$scope.userData.country = $scope.countries[3]; 

小提琴

Answer 4

尝试将您的html / angular更改为

<select ng-model="country" 
     ng-options="country.name for country in countries" ng-change="countryChanged(country)">
</select>

和您的控制器：

$scope.countryChanged = function(country){
    $scope.userData.country = country
}