在Angular数组上使用splice()时，jQuery选择器跳转到下一项

jQuery selector jumps to next item when using splice() on Angular array

本文关键字：选择器 一项 jQuery 数组 Angular splice      更新时间：2023-09-26

我试图在删除之前选择项目的dom对象。我将下面的函数连接到ng-repeat项中的Delete按钮的ng-click，并将$event对象作为参数传递。

$c = $($event.target)
$c.css('background','red');
$scope.post[$postIndex].comments.splice($index,1);

选择是正确的，但是在删除/拼接行之后(在原始DOM对象被销毁之后)，$c成为下一项的删除按钮的选择器——样式被转移了。这怎么可能呢?

我怀疑Angular比jQuery选择条目的速度更快，我试着把删除行包装在$timeout中，但无济于事。

(我试图在一个更简单的jfiddle中重现这个问题，但没有成功，在可能的答案之后，我会更新这篇文章，可能的干扰)

这就解决了:

var targetID = '#' + $event.target.id;
$c = $(targetID);
$scope.post[$postIndex].comments.splice($index,1);

根据我目前的研究，这就是ng-repeat(实际上也是Angular)的工作方式:它重用以前的DOM元素(连同它们的所有属性)。不支持在Angular之外编辑DOM。有时你可以绕过这个条件，但有时不能…

Update:在这个特殊情况下，问题是我在重复中使用了track by $index，删除它将解决DOM不匹配。然而，这仍然是一个混乱的解决方案，只有在您不想再编辑该元素时才建议这样做，并且还包括性能损失。

相关文章：