javascript - 当 ngmodel 与嵌套对象一起使用时，为什么 AngularJS 无法初始化选择选项(下拉列表)？

Question

我有一个复杂的对象，其中包含一些嵌套的对象数组。在其中一个内部对象中有一个值，它是另一个列表中项目的 ID。该列表只是代码和描述的查找，如下所示:

[
  { "id": 0, "value": "Basic"},
  { "id": 1, "value": "End of Month (EOM)"},
  { "id": 2, "value": "Fixed Date"},
  { "id": 3, "value": "Mixed"},
  { "id": 4, "value": "Extra"}
]

但是，我只携带嵌套对象中的值。选择选项列表(下拉列表)将显示先前列表中的所有值，以便用户可以进行选择。

通过 ng-model 绑定(bind)

然后我将从 Select/Option 返回的值直接绑定(bind)到嵌套对象。这样，当用户做出选择时，我的对象应该更新，这样我就可以将整个对象保存(发布)回服务器。

初始化是问题

选择工作正常，我可以看到当用户选择时，我的嵌套对象中的值都已正确更新。但是，当我从服务器检索(嵌套)对象时，无法将 UI(选择/选项)初始化为正确的值。

输入类型文本已正确绑定(bind)我的下一步是向表单添加一个文本框，将其绑定(bind)到相同的 ng-model 并查看它是否已初始化。确实如此。

这是我正在从事的一个大型项目，因此我创建了一个 plnkr.co 并分解了问题。您可以在以下位置查看我的 plnkr:http://plnkr.co/edit/vyySAmr6OhCbzNnXiq4a?p=preview

我的 plunker 看起来像这样:

未初始化

我在示例 1 中从我的项目中重新创建了确切的对象，如您所见，初始化时下拉列表未正确选择，因为值 (id) 实际上是 3，但下拉列表未显示选定的值(value)。

记住:它们是绑定(bind)的，选择一个会更新值

如果您尝试 plunker，您会看到值绑定(bind)到选择/选项列表，因为即使在未正确初始化的样本中，当您选择一个项目时，其他绑定(bind)项目也会立即更新。

开始工作了:Hack!

我使用它很长时间，并不断创建假对象以查看哪些有效，哪些无效。只有当我将值对象更改为如下所示时，它才有效:

$scope.x = {};
$scope.x.y = 3;

现在，我可以将 x.y (ng-model="x.y") 绑定(bind)到 select/option，它会按照您的预期初始化 select/option 列表。请参阅 plunker 中的示例 2，您将看到按预期选择了“混合”(id 值 3)。

追加作品

我还了解到以下内容会起作用:

$scope.lastObj = {};
$scope.lastObj.inner = [];
$scope.lastObj.inner.push(3);

更多嵌套

在这种情况下，我可以将 lastObj.inner 绑定(bind)到选择/选项列表，您可以在示例 3 中再次看到它仍然有效。这是一个对象，其中包含一个包含值的数组。

失败的最小嵌套

但是，plunker 中的示例 4 显示的最终嵌套量不适用于 AngularJS 绑定(bind)。

$scope.thing = {};
$scope.thing.list=[];
$scope.thing.list.push({"item":"3"});

这是一个对象，其中包含一个数组，该数组包含一个具有值的对象。它无法在选择/选项上正确绑定(bind)，但不能在文本框上正确绑定(bind)。

谁能解释一下，或者这是一个错误，还是两者兼而有之？

谁能解释为什么在这种情况下选择/选项无法正确绑定(bind)/初始化？

最后的说明

此外，要坚强，不要试图解释为什么你认为我的对象的嵌套应该不同。这不在这里讨论，除非你能告诉我 JavaScript 本身不支持这种行为。

但是，如果您能解释 Angular 无法处理如此深的嵌套以及原因，那么这就是一个完全有效的答案。

感谢您的任何意见。

Answer 1

你被原始类型搞得一团糟。这意味着你应该插入

$scope.vm.currentDocument.fieldSets[0].fields.push({"value":3});

代替

$scope.vm.currentDocument.fieldSets[0].fields.push({"value":"3"});

注意{"value":3}和{"value":"3"}的区别

第一个定义了一个具有 Integer 类型属性“value”的对象，第二个定义了一个具有 String 类型属性“value”的对象。当 Angular 检查类型匹配时，它变成 ("3"=== 3) 评估为 false，这就是 Angular 无法找到所选选项的原因。它应该是这样工作的。