2014-10-02 16 views
6

Ich arbeite mit eckigen Aufbau einer Tabelle von Daten, die von einem JSON-API-Aufruf stammt. Ich muss ein verschachteltes ngRepeat verwenden, aber ich sehe seltsame Ergebnisse, wenn ganze Tabellenzeilen fehlen, wenn die Zeile ein paar leere Zeichenfolgen enthält.ngRepeat: Dupes - Duplikate in Repeater mit verschachtelten ngrepeat und leere Strings

Ich kann mit dem folgenden Plunk reproduzieren. 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> 

Hinweis, wenn ein Array hat zwei leere Strings die verschachtelte ngRepeat scheint zum Scheitern verurteilt.

Werde ich verrückt? Gibt es dazu eine Erklärung?

Antwort

9

Ja. Sie müssten track by $index verwenden, da Sie Grundelemente wiederholen oder in ein Array von Objekten konvertieren. Grund ist ng-repeat erzeugt eine eindeutige ID $$hashkey (und an das wiederholte Objekt als Eigenschaft angehängt) für jeden der iterierten Werte, wenn es ein Objekt ist (es sei denn, Sie geben etwas als Spur an).

In Ihrem Fall haben Sie Primitive, so dass es keine Eigenschaft selbst anhängen kann, also versucht es, die Werte als Bezeichner wiederholt zu betrachten und findet doppelte, wenn Sie mehrere leere Strings iteriert haben. Sie würden den gleichen Effekt sehen, wenn Sie Array von Objekten wiederholen mit mehr als einem von ihnen ist undefined oder null auch.

So in diesem Fall können Sie verfolgen, indem $index So wiederholte Elemente werden durch seinen Index verfolgt.

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

Demo

viel bessere Option immer ist es von Objekten Array zu konvertieren, so dass Sie nicht in diese Art von Problemen führen. Wenn Sie eine Eigenschaft haben, die das wiederholte Element eindeutig identifiziert (z. B. id), können Sie es als track by Eigenschaft festlegen. Wenn Sie das Array erneut binden (oder das Array aktualisieren), verwendet angular den verfolgten Bezeichner, um festzustellen, ob das Element aus dem DOM entfernt und neu erstellt oder das bereits vorhandene Element aktualisiert werden muss. In vielen Fällen, in denen eine Liste mit der Liste von Elementen aktualisiert wird, ist es immer wünschenswert, eine Spur mit einer Kennung auf dem Objekt zu verwenden, die für die Leistungseffektivität wiederholt wird.

+0

Vielen Dank !!! Ich frage mich ernsthaft ..... WARUM DER CODE SIE NICHT DEFAULT ?????? –

+1

Große Erklärung und Arbeitscode. - Vielen Dank! – SeanRamzan