ngRepeat: dupes - duplicati nel ripetitore con ngrepeat nidificato e stringhe vuote

Question

Sto lavorando con la costruzione angolare di una tabella di dati proveniente da una chiamata API JSON. Sto utilizzando un ngRepeat nidificato, tuttavia sto vedendo strani risultati in cui mancano intere righe della tabella quando la riga ha un paio di stringhe vuote.

Posso riprodurre con il seguente 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> 

Avviso quando un array ha due stringhe vuote il ngRepeat nidificata appare al sicuro.

Sto impazzendo? C'è una spiegazione a questo?

Answer 1

Sì. Dovresti usare track by $index dato che stai ripetendo le primitive o convertirlo in una matrice di oggetti. Il motivo è ng-repeat crea l'ID univoco $$hashkey (e collegato all'oggetto ripetuto come proprietà) per ciascuno dei valori iterati se si tratta di un oggetto (a meno che non si specifichi qualcosa come traccia per).

Nel tuo caso hai primitive quindi non può allegare una proprietà stessa, quindi prova a considerare i valori ripetuti come identificatore e trova duplicati quando hai più stringhe vuote ripetute. Si vedrebbe lo stesso effetto quando si ripete la matrice di oggetti con più di uno di essi non definito o nullo.

Quindi in questo caso è possibile utilizzare la traccia per $index così gli articoli ripetuti verranno tracciati dal suo indice.

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

Demo

Molto meglio opzione è sempre per convertirlo in array di oggetti in modo da non incorrere in questo tipo di problemi. Quando si dispone di una proprietà che identifica in modo univoco l'elemento ripetuto (ad esempio id), è possibile impostarlo come proprietà track by. Quando si ricollega l'array (o si aggiorna l'array) angular utilizza l'identificatore tracciato per determinare se è necessario rimuovere l'elemento dal DOM e ricrearlo o semplicemente aggiornare l'elemento già esistente. Molti casi in cui un elenco viene aggiornato con l'elenco di elementi è sempre consigliabile utilizzare una traccia con un identificatore sull'oggetto ripetuto per l'efficacia delle prestazioni.