javascript – 处理ng-repeat中的重复元素

我正在构建一个具有一种“播放列表”的应用程序.这表示ng-repeated自定义指令,其中ng-repeat =“播放列表中的元素”

因为我想允许用户在播放列表中重复使用相同的元素两次,所以我尝试使用$index添加轨道.

现在,令人困惑的是：当我从播放列表中删除一个元素时(我有一个函数removeElement(index),它基本上包含这样的东西：

$scope.removeElement = function(index){
  $scope.playlist.splice(index,1);
}

发生了一些奇怪的事情：元素已从$scope.playlist中正确删除,但由于某种原因,视图没有正确更新.最后一个元素似乎被删除了.

此外,我无法正确地重新排序数组中的元素.

当我通过$index删除跟踪时,这个问题就消失了,所以我认为这是因为当你从数组中删除一个项目时,如果你只是查看索引,那么看起来你刚刚删除了最后一个.

这种行为很奇怪,因为被剔除的内容被正确删除 – see this plunker

编辑：上面的链接已被修改,以更好地显示问题,并显示我确定的答案.

这个问题也经过了轻微编辑,以便更清楚地了解我的情况. KayakDave下面的答案仍然是正确的,但更适合一系列原语(我原来的plunker特色).

TL; DR：如何在不牺牲控制位置的能力或正确删除元素的情况下将重复元素放入ng-repeat中？

使用track by的一个重要性能优势是Angular不会触及跟踪表达式未发生变化的任何DOM元素.对于长ng重复列表而言,这是一个巨大的性能改进,也是增加轨道的原因之一.

性能优化是您所看到的根源.

当你在轨道中使用$index时,你会告诉ng-repeat将它创建的每个DOM元素与第一次ng-repeat运行时的位置($index)联系起来.

所以颜色样式为红色的元素标记为0,橙色1,黄色2 ……最后标记为靛蓝5.

当您删除一个颜色时,Angular会查看您告诉它要跟踪的索引并看到您的索引#5更长(因为您的列表比以前更短).因此,它删除了标记为5-的DOM元素,其具有“indigo”的颜色样式.您仍然有索引#2,因此颜色为黄色的元素会保留.

令人困惑的是,由于数据绑定,DOM元素内的文本确实会更新.因此,当您删除“黄色”时,带有黄色的DOM元素会将文本设置为“绿色”.

简而言之,你所看到的是ng-repeat,因为它的跟踪值(2)仍然存在,但是数据绑定已经更新了该元素内的文本,因此DOM元素的样式保持黄色不变.

要添加具有相同颜色的多个条目,您需要将唯一标识符添加到用于轨道的每个条目中.一种方法是为每个条目使用键值对,其中键是您的唯一标识符.像这样：

$scope.colorlist = {1:'red',2:'orange',3:'yellow',4:'green',5:'blue',6:'indigo',7:'yellow'};

然后按键跟踪如下：

<color-block ng-repeat="(key,color) in colorlist track by key" color="{{color}}" ng-transclude>
    {{color}}
</color-block>

并确保使用该键进行删除选择：

<option value="{{key}}" ng-repeat="(key,color) in colorlist">{{color}}</option>

现在,颜色样式为黄色的DOM元素与您为“黄色”数组元素指定的键相关联.因此,ng-repeat将删除正确的DOM元素,一切正常.

相关文章