angularjs - ng重复 :dupes - duplicates in repeater with nested ngrepeat and empty strings

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属性(property)。当您重新绑定(bind)数组(或刷新数组)时，angular 使用跟踪的标识符来确定它是否需要从 DOM 中删除元素并重新创建它，或者只是刷新已经存在的元素。在使用项目列表刷新列表的许多情况下，总是希望使用带有重复对象上的标识符的跟踪以提高性能。