Verwenden von ng-If mit ng-repeat zum Ausblenden unsichtbarer Elemente beim Anzeigen großer Sammlung

Question

Ich habe eine große Sammlung von Elementen - ~ 2000 Elemente.

Bei der Anzeige mit ng-repeat beträgt die Anzahl der Beobachter 16K und das DOM ist kaum aktiv.

Ich versuche, die Elemente in einer Tabelle mit ng-if anzuzeigen, so dass nur sichtbare Elemente sichtbar wären.

Ich habe versucht, unendliches Scrollen zu implementieren, aber es löst nicht die große Anzahl von Beobachtern. Also entschied ich, dass es am besten wäre, wenn ich die Elemente, die nicht sichtbar sind, nicht rendern würde.

Gibt es eine Abfrage, die ich auf jedes Element setzen kann, das mir schnell sagen wird, ob das Element auf der Seite sichtbar ist?

mein Code:

<tr ng-repeat="mi in vm.displayDNAList track by $index"> 
<span>{{ ::mi.name }}</span> 
</tr> 

Answer 1

In großen Sammlungen, zu überprüfen, ob Elemente in-Ansicht mit DOM related solutions sind nicht unbedingt erfahren Sie, wenn alle verschachtelten Komponenten geladen haben oder vollständig wiedergegeben und zu Fehlern führen könnte.

Meine Lösung für dieses Problem zusammen mit scrollTop und scrollBottom Rückrufen limitTo : limit: begin Filterwinkel der Bearbeitung oder Reduzierung erhöht den begin Index gemäß der Scroll-Richtung (oben/unten) - Sortierung von Frontend Paginierung, , wo nur eine bestimmte Anzahl von Artikel werden jederzeit angezeigt - ohne schwere DOM-Beobachter.

<tr ng-repeat="item in items | limitTo : 100 : 600 track by $index"> 
    <span>{{ item.name }}</span> 
</tr> 

Sie benötigen die optimale limitTo Zahl zu finden, die für die App am besten funktioniert, während es leicht und agil zu halten.

Answer 2

Ich würde Sie Filter in Javascript verwenden vorschlagen, bevor ng-repeat

vm.displayDNAList = data.filter(function(d){ 
    return d.element; 
}); 

verwenden, wenn Sie ng-wenn es noch werfen gehen verwenden möchten die Jedes Rendering von Elementen wird langsam.

Answer 3

<tr ng-repeat="mi in vm.displayDNAList track by $index"> 
<span id="{{mi.name}}">{{ ::mi.name }}</span> 
</tr> 

in JS zu überprüfen, ob die ID ist in DOM

if(document.getElementById(value)!==undefined){ 
return true; 
} 

Diese schnell. Sie können aber auch einen Filter erstellen und eine Funktion schreiben, die einen Booleschen Wert zurückgibt. Dies kann je nach Anwendungsfall funktionieren oder nicht.

function valueCheckerFunction(item){ 
    if(item==='xx'){ 
     return item; 
    } 
} 
    return if(vm.displayDNAList.filter(valuecheckerFunction)); 

http://www.w3schools.com/jsref/jsref_filter.asp

Answer 4

Sie einen Filter verwenden, können die Ergebnisse nur auf die sichtbaren elements.This zu begrenzen geht davon aus, dass die mi Objekt eine Eigenschaft sichtbar genannt hat.

<tr ng-repeat="mi in vm.displayDNAList | filter:visible track by $index"> 
<span>{{ ::mi.name }}</span> 
</tr> 

Answer 5

Ich würde vorschlagen, dass Sie ein Array von Elementen erstellen, die Sie getrennt anzeigen und auf diesem Array rendern möchten. Anstatt Limit oder Filter zu verwenden, weil es Ihre einzige domre ist, dass es nicht sichtbar sein wird.

mainArray= [2000 element]; 
createAnArray = [25elements] 

Änderung, die variable createAnArray, wie Sie auf Ereignisse in Abhängigkeit wollen