ngRepeat:dupes - 在中继器中重复嵌套的 ngrepeat 和空字符串

Question

我正在使用 Angular 构建一个来自 JSON API 调用的数据表。我不得不使用嵌套的 ngRepeat，但是我看到奇怪的结果，当行有几个空字符串时，整个表行都丢失了。

我可以用下面的 plunk 重现。 http://plnkr.co/edit/VCzzzPzfgJ95HmC2f83P?p=preview

<script>
function MyController($scope){
    $scope.test = {"rows":[
      ["one","two","three"],
      ["one","two","three"],
      ["one","","three"],
      ["one","",""],
      ["","two",""],
      ["","","three"],
      ["one","two","three"],
      ["one","two","three"],
      ]};};
</script>
<div ng-app ng-controller="MyController">
<table>
    <tr ng-repeat="(key,ary) in test.rows">
        <td>{{key}}</td>
        <td ng-repeat="value in ary">{{value}}</td>
    </tr>
</table>
</div>

请注意，当数组有两个空字符串时，嵌套的 ngRepeat 似乎会失败。

我要疯了吗？对此有解释吗？

Answer 1

是的。您需要使用track by $index，因为您正在重复原语，或者将其转换为对象数组。原因是 ng-repeat 为每个迭代值创建唯一 id $$hashkey（并作为属性附加到重复的对象）如果它是一个对象（除非您指定某些东西作为跟踪依据）。

在您的情况下，您有原语，因此它不能附加属性本身，因此它会尝试将重复的值视为标识符，并且当您迭代多个空字符串时它会发现重复。当您重复对象数组且其中多个对象未定义或为空时，您会看到相同的效果..

所以在这种情况下，您可以使用 track by $index 这样重复的项目将通过其索引进行跟踪。

<td ng-repeat="value in ary track by $index">{{value}}</td>

Demo

更好的选择总是将其转换为对象数组，这样您就不会遇到这类问题。如果您有一个唯一标识重复元素的属性（例如id），您可以将其设置为track by 属性。当您重新绑定数组（或刷新数组）时，angular 使用跟踪的标识符来确定它是否需要从 DOM 中删除元素并重新创建它，或者只是刷新已经存在的元素。在使用项目列表刷新列表的许多情况下，总是希望使用带有重复对象上的标识符的跟踪以提高性能。