Question

我有一个包含表单的角度应用程序，它有一个选择。我可以选择其中一个选项，并在模型中完美更新。但是下次我进入表格时，它应该是预先填写的＃34;因为数据已经存在。并且所有数据都已填满，但角度似乎没有认识到模型的值对应于选择的值。

html / angular：

<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而不是国家/地区

<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代码，则不必在以后搜索国家/地区数组。

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

Fiddle

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
}

ng-select不会识别ng-model是一个有效的选项，应该被选中

4 个答案: