Question

我在angularJS中预选选择输入时遇到了一些问题。选择框由数组填充。

<select class="form-control" 
ng-model="userCtrl.selected_country" 
ng-options="country.name for country in userCtrl.available_countries track by country.id">
</select>

e.g。所选国家/地区填充了一个ID（我通过API获得）。

userCtrl.selected_country = 4;

但它不起作用。我也尝试过选项和ng-selected。

<option ng-repeat="country in userCtrl.available_countries"
ng-selected="{{ country.id == userCtrl.selected_country }}"
value="{{ country.id }}">
{{ country.name }}
</option>

为什么我不能这样选择？这个“有用”，在我看到的正确选项中看到的源代码=“true” - 但是在视图中你看不到它......非常奇怪。

我的“解决方案”现在是，我用我的ng-model填充了源数组“available_countries”的正确值。不必要的许多步骤？！

加载API的数据（选择填充）
加载API的数据（地址）
将所有参考ID（如country_id，state_id）操作到select-fill-objects（用于预选）
用户编辑发生=＆gt;用户点击更新
将所有选择填充对象更改回reference-id
立即保存地址
重复第3步

3.，5。和7.是不必要的。无论如何这可能吗？

感谢您的帮助:-) 斯蒂芬

Answer 1

延长@zeroglagL的答案。

在您的示例中，ng-options指令用于告诉AngularJS，ng-model和option都应该是具有相同结构的对象：

// JSON representation of userCtrl.selected_country is an object
{
    name: "Poland",
    id: 1 
}

// JSON representation of userCtrl.available_countries in an array of objects
[
{
    name: "Poland",
    id: 1 
}
{
    name: "USA",
    id: 2
}
]

所以基本上当你使用：

ng-options="country.name for country in userCtrl.available_countries track by country.id"

您告诉AngularJS为country数组中的每个userCtrl.available_countries创建选项对象，其中country.name为标签，country.id为每个选项的值。 AngularJS还将假设ng-model将成为一个对象，并将＆＃34;绑定＆＃34;两个对象的id属性的模型选项。

所以你必须按照我上面描述的方式构建你的ng-model。

或者您可以以其他方式使用ng-options（如@zeroglagL所述）：

ng-options="country.id as country.name for country in userCtrl.available_countries"

在这种方法中，您告诉AngularJS仅将选项和ng-model视为标量ids（而不是对象）。没有必要＆＃34;绑定＆＃34;对象由ids组成，因为AngularJS只会在预选选项时比较整数值。这种方式userCtrl.available_countries实际上可以是对象数组，但ng-model值（在选择或预选后）只包含id

Answer 2

模型必须匹配选项的值。在您的情况下，模型是一个id，选项值是整个对象。

您也可以将模型设为对象，或者

ng-options="country.id as country.name for country in userCtrl.available_countries"

Answer 3

要实现此功能，您必须将ng-model绑定到要选择的对象，而不是id。所以，试试这个：

$scope.userCtrl.selected_country = $scope.userCtrl.available_countries[4];

AngularJS选择选项预选

3 个答案: