修改 ngModel 后列表变为空答案

【问题标题】：lists become empty after modifying a ngModel修改 ngModel 后列表变为空
【发布时间】：2013-11-05 20:19:13
【问题描述】：

在两个列表之间拖放，我可以使用 angular-dragdrop，不幸的是它在 IE8 中不起作用，所以我们必须使用 jquery 之一。

拖放工作正常，直到用户在输入框（具有 ngModel）中输入内容，然后列表变为空。

我为输入框放了一个手表，列表中有项目但它们没有显示。

这是小偷

http://plnkr.co/edit/WQSXtyj3sJ0n14IXv7YN?p=preview

编辑：我通过简单地添加 var row = {logon: item.innerText};并将其推入 obj1 obj2 数组。

【问题讨论】：

标签： jquery angularjs drag-and-drop

【解决方案1】：

无论何时使用 DOM，都应该使用指令。我不确定接收器函数中的所有代码应该做什么，但它最终会导致 Angular 失去对您数据的引用。看起来您将 DOM 的 innerText 转换为数组并用它覆盖模型。您的模型是一个对象数组，但您将其转换为一个文本数组？

您在更改模型时看到它消失的原因是您在此之前从未触发过$digest。然后 $digest 发生，您的 ng-repeats 运行并且不再有任何适当的数据，因此它们什么也不返回。此外，将 ng-model 分配给列表元素不会做任何事情。那里没有任何功能。

我认为您应该先了解如何创建指令，然后再继续。要解决您当前的问题，您可以使用此处找到的现有拖放指令：http://codef0rmer.github.io/angular-dragdrop/#/ 您说它不适用于 IE8，但只要您遵循 IE8 预防措施，它就没有理由不适用于 IE8 AngularJS 文档中概述：http://docs.angularjs.org/guide/ie。

【讨论】：

这里是关于拖放不能与 IE8 一起使用的问题：stackoverflow.com/questions/19731415/…
乔纳森，你的评估是错误的：“......它最终导致 Angular 失去对你数据的引用......”。我只需添加 var row = {logon: item.innerText}; 就可以让它工作。并将其推入 obj1 obj2 数组。它只是缺少关键值。感谢您在理解此人的问题之前投反对票。
投反对票的不是我。我正确回答了您的问题，您将 obj 从 obj 转换为数组，这导致 Angular 丢失其哈希值，即引用。您将模型转换为 DOM 并转换回模型。您这样做的方式仍然不正确，您仍然应该创建指令并管理数据。