2

我有一个复杂的对象，其中包含一些嵌套的对象数组。在其中一个内部对象内部是一个值，它是另一个列表中项目的 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 绑定

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

初始化是问题

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

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

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

我的 plunker 看起来像这样：

小样

未初始化

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

请记住：它们是绑定的，选择一个会更新值

如果您尝试使用 plunker，您将看到这些值已绑定到选择/选项列表，因为即使在未正确初始化的示例中，当您选择一个项目时，其他绑定的项目也会立即更新。

得到它的工作：哈克！

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

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

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

附加作品

我还了解到以下内容将起作用：

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

更多嵌套

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

失败的最小嵌套

但是，plunker 中的示例 4 显示了嵌套的最终数量，这不适用于 AngularJS 绑定。

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

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

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

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

最后一点

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

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

感谢您的任何意见。

4

2 回答 2

3

你搞砸了原始类型。这意味着你应该插入

$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 找不到选定选项的原因。这就是它应该如何工作的方式。

于 2014-05-01T20:32:58.417 回答
3

另请注意 - 正如 Armen 指出的那样 - 对象是通过引用传递的，而不是通过值传递的原语。

由于这个事实，通常通过 ngModel 从 JSON（例如，从 $resource 记录）初始化一个选择框，您需要将模型值设置为特定的数组元素/对象属性，该属性正在由 Angular内部检查是否相等ngOptions 中的元素（或具有分配给相同记录对象的 ng 值的重复选项元素）。JS 中没有两个不同的对象被认为是相等的，即使它们具有相同的属性名称/值。

Angular 有一种解决方法：在 ngOptions 属性中使用“track by”子句。只要你有一个保证唯一的值（例如来自 db 的记录索引），Angular 就会检查模型值和 ngOptions 中的记录之间的属性值。

有关更多信息，请参阅https://docs.angularjs.org/api/ng/directive/select。

于 2014-11-18T23:42:58.937 回答