Angularjs 如何使用ng REPECT和drop in ANGLARJS避免重复项目？

你能告诉我一些问题的正确答案吗？ 我有下一个情况：

1.我从服务器加载项目列表，并在容器中使用ng repeat在此处列出：

<div layout="column" id={{vm.folderId}}container flex layout-align="start center" class='container' dragula='"first-bag"'>
   <div id={{item.id}}child class="md-whiteframe-5dp capitalize itemsInList" layout="column"  ng-repeat="item in vm.workItems | filter:search">
      <div layout="column" flex >
         <div class="workItemName">{{vm.getWorkItemName(item.metadata)}}</div>
         <div class="workItemDescription">{{vm.getWorkItemDescription(item.metadata)}}</div>
      </div>
   </div>
</div>

然后我将另一个元素放入这个容器中，即第5项。 在我退出后，服务器会给我一个新列表：项目1- 项目2- 项目3- 项目4- 项目5 我在这里更新我的

vm.workItems

：

if (data.ok) {
    if (data.content.items.length != vm.workItems.length) {
        vm.workItems = data.content.items; //from server
        SharedDataService.setLastUpdateTimeStamp(SharedDataService.getNewUpdateTimeStamp());
    }
}

在重复新项目之后，它还会查看列表中的droped元素。因此，最后我有：

item_1 //ng-repeated
item_2 //ng-repeated
item_3 //ng-repeated
item_4 //ng-repeated
item_5 //ng-repeated
item_5 //droped element

如何避免这种情况？有正常的解决方法吗

更新。我删除元素，当它被删除时，我向服务器请求添加新项目以列出：

  $scope.$on('first-bag.drop', function (e, el, container) {
        var elementId = parseInt(el[0].id);
        var newContainerId = parseInt(container[0].id);
        var newPrevElementId;
        var newPrevElement = document.getElementById(el[0].id).previousElementSibling;

        if(newPrevElement) {
            newPrevElementId = parseInt(newPrevElement.getAttribute('id'));
        } else  if(!newPrevElement)  {
            newPrevElementId = newContainerId;
        }

        if(exContainerId != newContainerId) {
            WebSocketService.addItem(elementId, exContainerId,
}
}

---

在您的函数中尝试以下操作：

let data = data.content.items;
let temp = [];
data.forEach(function(item) {
    if (temp.indexOf(item) === -1) {
    temp.push(item);
  }
});
vm.workItems = temp;

希望这有帮助。

你能做到

ng-repeat="item in vm.workItems track by item.id | filter:search"

如果每个项目都有一个唯一的ID（或某个唯一的属性），并且如果您使用

track by

ID，则即使服务器返回以前的项目并向其添加新项目，DOM也不会重新呈现，只有新项目会添加到DOM

（看一下控制台）

ng repeat

在对象列表中重复时，向每个对象添加

$$hashkey

属性

当服务器返回新数据时，尽管已经存在对象，但由于新数据（每个对象）中不包含

$$hashkey

属性，

ng repeat

重新渲染，然后认为它们是新对象

如果使用

track by ID

，则

ng repeat

不会添加

$$hashkey

属性，它会使用

ID

跟踪每个项目。所以，即使服务器再次返回相同的数据，由于ID的匹配，

ng repeat

也不会重复它们。如果有新的ID，它会呈现给DOM

---

看看这个博客。

同样。它在删除DOM元素之前通过ng repeat列出收到的项目。但是谢谢你的尝试。我想这应该可以吗？ng repeat=“vm.workItems track by index”@AmitKarnik我不是100%确定，但是

track by$index

使用数组中对象的位置。如果相同的数据以不同的顺序再次来自服务器，那么可能会出现一些问题。但是，有了身份证，无论他们的订单是什么，你都可以确定。我会尽量使用它。希望不会得到额外的DOM元素抱歉错过了“$”，感谢您的澄清。仍然呈现额外的DOM:（我使用：发现了另一个类似的问题..这可能会对您有所帮助。

ng-repeat="item in vm.workItems track by item.id | filter:search"