2017-03-27 12 views
0

Wenn ich ng-Wiederholungen in uls und li's verwende, bekomme ich die Fehler.

Hier ist mein HTML-Code:

<ul> 
     <li ng-repeat="(key, value) in (myData | groupBy: 'id')"> 
      {{key}} 
      <ul> 
       <li ng-repeat="details in value"> 
        {{details.name}} 
       </li> 
      </ul> 
     </li> 
    </ul> 

JS-Code:

.filter('groupBy', function() { 
return function (data, key) { 

    var result = {}; 
    for (var i = 0; i < data.length; i++) { 
     if (!result[data[i][key]]) 
      result[data[i][key]] = []; 
     result[data[i][key]].push(data[i]) 
    } 
    alert(JSON.stringify(result)); 
    return result; 
}; 
}); 

Dies sind die Fehler, die ich

enter image description here

+0

add 'groupBy' Filtercode hier –

+0

Welche Version von angular-Filter verwenden Sie? Probieren Sie die neuesten https://github.com/a8m/angular-filter/releases/tag/v0.5.15 – Olezt

Antwort

0

Versuchen bin immer track by $index im ng zu setzen -repeat wie folgt:

<ul> 
    <li ng-repeat="(key, value) in myData track by id"> 
     {{key}} 
     <ul> 
      <li ng-repeat="details in value"> 
       {{details.name}} 
      </li> 
     </ul> 
    </li> 
</ul> 

Sie können auch track by $index wenn Sie Duplikate in Array

<li ng-repeat="(key, value) in myData track by $index"> 
+0

gruupby ist ein benutzerdefinierter Filter @Muhammed Neswine – anub

+0

können Sie eine Geige hinzufügen? –

+0

https://plnkr.co/edit/kltGAyiY7DZbpmUUZGyg?p=preview @ Muhammed Neswine – anub

0

Die unendliche verdauen durch den Filter verursacht wird, die jedes Mal, es läuft durch die Funktion ein neues Ergebnis zurückgibt. Sie müssen die Funktion neu schreiben, so dass sie direkt das ursprüngliche data Argument ändert und das Argument data erneut zurückgibt.

+0

Sorry können Sie bitte erklären, wie Sie die Funktion @Giovani Vercauteren – anub

+0

Der Filter umschreiben Funktion gibt jedes Mal ein neues Ergebnisobjekt zurück. Angular führt den Filter aus und empfängt ein Ergebnis. Angular führt den Filter erneut aus und merkt, dass er nicht mit dem letzten Ergebnis übereinstimmt (wegen eines neuen Objekts), und weil er anders ist, wird er in eine Endlosschleife laufen und den Stop nach 10 Schleifen erzwingen. Sie müssen das 'data' Argument direkt ändern und das zurückgeben. Angular überprüft Objekte/Arrays nicht tief, es prüft nur, ob es sich um eine neue Instanz handelt. –

Verwandte Themen