1

我在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>

例如，一个选定的国家/地区填充了一个 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>

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

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

  1. 加载 API 的数据（选择填充）
  2. 加载 API 的数据（地址）
  3. 将所有引用 ID（如 country_id、state_id）操作到 select-fill-objects（用于预选）
  4. 用户编辑发生 => 用户点击更新
  5. 将所有选择填充对象更改回参考 ID
  6. 立即保存地址
  7. 重复步骤 3

如果我可以仅使用数字进行预选，则不需要 3.、5. 和 7.。这有可能吗？

感谢您的帮助:-) Stefan

4

3 回答 3

3

扩展@zeroglagL 回答一下。

在您的示例ng-options中，指令的使用方式告诉 AngularJS 两者ng-modelANDoption应该是具有相同结构的对象：

// 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中的每个选项创建选项对象，并作为标签和每个选项的值。AngularJS 还将假定这将是一个对象，并将通过两个对象的属性将选项与模型“绑定” 。userCtrl.available_countriescountry.namecountry.idng-modelid

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

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

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

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

于 2015-11-13T19:30:33.400 回答
1

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

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

ng-options="country.id as country.name for country in userCtrl.available_countries"
于 2015-11-13T18:27:49.497 回答
0

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

$scope.userCtrl.selected_country = $scope.userCtrl.available_countries[4];
于 2015-11-13T18:17:49.223 回答