AngularJS Select 选项预选

Question

我在 angularJS 中 select 输入的 select 之前遇到了一些问题。 select-box 由数组填充。

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

例如selected 国家填充了 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>

为什么我不能像这样制造 selection？这个 "works"，在源代码中我看到了正确的选项 selected="true" - 但在视图中你看不到它......很奇怪。

我的 "solution" 现在是，我用源数组 "available_countries" 的正确值填充我的 ng 模型。不需要很多步骤？！

加载API的数据（select填充）
加载 API
将所有引用 ID（如 country_id、state_id）操纵到 select-填充对象（对于 preselection）
发生用户编辑 => 用户点击更新
将所有 select-fill-objects 改回 reference-id
立即保存地址
重复步骤 3

3.、5. 和 7. 是不必要的，如果我可以预先 select 只是一个数字。这有可能吗？

感谢您的帮助:-) 斯特凡

Answer 1

要使其正常工作，您必须将 ng-model 绑定到您想要 select 的对象，而不是 id .所以，试试这个：

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

Answer 2

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

你要么把模型也做成对象，要么做

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

Answer 3

稍微扩展一下@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 为 userCtrl.available_countries 数组中的每个 country 创建选项对象，将 country.name 作为标签，将 country.id 作为值每个选项。 AngularJS 还将假设 ng-model 将成为一个对象，并且将 "bind" 选项与两个对象的 id 属性模型。

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

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

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

在这种方法中，您告诉 AngularJS 将选项和 ng-model 都视为标量 ids（而不是对象）。不再需要通过 ids 来 "bind" 对象，因为 AngularJS 将在预选选项时简单地比较整数值。这样 userCtrl.available_countries 实际上可以是对象数组，但是 ng-model 值（在选择或预选之后）将只包含 id

AngularJS Select 选项预选

AngularJS Select Options Preselection

javascript

angularjs

angularjs-select