ngRepeat：dupes - 使用嵌套的ngrepeat和空字符串在中繼器中複製

Question

我正在使用角度構建來自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中刪除該元素並重新創建該元素，或僅刷新已存在的元素。很多情況下，列表刷新項目列表時，總是希望使用軌跡，並在對象上標識重複以提高性能。