ngRepeat: dupes - iç içe ngrepeat ve boş dizelerle tekrarlayıcıda kopyalar

Question

Bir JSON API çağrısından gelen bir veri tablosunu açısal yapıyla çalışıyorum. Yuvalanmış bir ngRepeat kullanmak zorundayım ancak satırın çift boş dizeleri olduğunda tüm tablo satırlarının eksik olduğu garip sonuçlar görüyorum.

Aşağıdaki yazıyla çoğaltabilirim. 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> 

Bildirim bir dizi iç içe ngRepeat başarısız görünen iki boş dizeleri olması gibi.

Kızgın mıyım? Bunun bir açıklaması var mı?

Answer 1

Evet. İlkelleri tekrarladığınızdan veya nesnelere dönüştürdüğünüzden, track by $index'u kullanmanız gerekir. Sebep ng-repeat, bir nesne ise (parça olarak bir şey belirtmediğiniz sürece) yinelenen değerlerin her biri için benzersiz kimlik $$hashkey (ve tekrarlanan nesneye özellik olarak eklenmiş) oluşturur.

Sizin durumunuzda, bir özelliği kendisinin ekleyememesi için ilkel öğeleriniz vardır, bu nedenle tanımlayıcı olarak yinelenen değerleri dikkate almaya çalışır ve yinelenen çok sayıda boş dizginiz olduğunda yinelenen bulur. Birden fazla nesne ile tekrarlanan nesneler tekrarlandığında aynı etkiyi göreceksiniz undefined veya null olduğunu da ..

Bu durumda parçayı $index izleyebildiğinden, tekrarlanan öğeler dizini tarafından izlenir.

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

Demo

Çok daha iyi seçenek her zaman bu tür sorunlar üzerinde girmek kalmamak nesnelerin dizisine dönüştürmek etmektir. Yinelenen öğeyi benzersiz olarak tanımlayan bir özelliğiniz olduğunda (örneğin id), onu track by özelliği olarak ayarlayabilirsiniz. Diziyi yeniden ispatladığınızda (veya diziyi yenilediğinizde) açısal, öğeyi DOM'den kaldırıp yeniden oluşturması gerekip gerekmediğini belirlemek için izlenen tanımlayıcıyı kullanır veya yalnızca varolan öğeyi yeniler. Bir listenin öğeler listesiyle yenilendiği birçok durum, performans etkinliği için tekrarlanan nesne üzerindeki bir tanımlayıcı ile bir parçayı kullanmak için her zaman istenir.