Question

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

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>

我们已经列出了下一个列表：

item_1
item_2
item_3
item_4

而不是将另一个元素放入此容器ITEM_5中。在我下载服务器后给我新的列表：item_1 - item_2 - item_3 - item_4 - item_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,
}
}

Answer 1

你可以做到

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

如果每个项目都有唯一的ID（或某些唯一属性），并且使用track by ID，那么即使服务器返回添加了新项目的先前项目，DOM也不会重新呈现，只有新项目才会被添加到DOM中。

Plunker（看看控制台）

ng-repeat在每个对象通过对象列表重复时将$$hashkey属性添加到

。

当您的服务器返回新数据时，虽然已有现有对象，因此，新数据（每个对象）中不包含$$hashkey属性，ng-repeat重新呈现然后认为它们是新的对象。

如果您使用track by ID，则ng-repeat不会添加$$hashkey属性，而是使用ID跟踪每个项目。因此，即使服务器再次返回相同的数据，由于ID匹配，ng-repeat也不重复它们。如果有新的ID，那么它会呈现给DOM。

请查看此博客post。

Answer 2

在你的函数中试试这个：

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

希望这有帮助。

如何避免重复项目与ng-repeat和dropjs？

2 个答案: