das Laden eines großen Arrays in oi-select dauert in angularjs zu viel Zeit

8

Ich benutze oi-select library, ich habe es entsprechend meiner Projektnotwendigkeit angepasst und ich habe Anweisung dafür geschrieben. Das Problem ist, dass es zu viel Zeit in Anspruch nimmt, sagen wir 10 Sekunden, um 3k Array-Daten zu laden. Ich möchte die Zeit dafür minimieren. Hier habe ich bottler dafür erstellt.

Ich habe Anweisung, die alle Fabrikdaten lädt und es zur Verfügung stellt, um zu wählen, in meinem Code ist hier html

%Vor%

HTML-Code in Direktive sieht wie

aus %Vor%

angular code ist zu groß, um in dieser Frage zu erwähnen, bitte verweisen Sie auf Plunker, aber das ist, wie es loop

%Vor%

Ich möchte etwas wie das lädt Teildaten auf Bildlauf, es lädt mehr Daten, jede Hilfe wird geschätzt. Vielen Dank.

BEARBEITEN Jetzt habe ich meinen Plocker mit limitTo in ng-repeat bearbeitet, dafür habe ich eine neue Direktive geschrieben, die die Funktion addmoreitems auslösen wird, wenn Scroll den Boden erreicht. aktualisierterPlunker

Jetzt ist das Problem, wenn ich schreibe und etwas suche seine Suche in nur verfügbaren Datensätzen in Bezug auf limitTo es nicht in allen Daten suchen, sagen Sie jetzt das LimitTo ist 50 dann Suche findet nur in 50 Datensätze nicht in 3k statt Aufzeichnungen.

    
Sudarshan 20.01.2018, 11:30
quelle

3 Antworten

6

Korrektes Ausführen dieser Art von Anforderung ist mit pagination zu tun. Da Sie Daten von der Serverseite laden, sollten Sie Ihre API so gestalten, dass sie die Paginierung unterstützt.

Es sollte drei Parameter akzeptieren, wie number of items , start , limit und Sie sollten zuerst die Anzahl von erhalten Elemente und wiederholen Sie es, bis Sie die gesamte Ergebnismenge erhalten.

Es sollte eine weitere Anfrage geben, um die total number Elemente zu erhalten. Auf diese Weise können Sie alle Elemente abrufen, die auf der Clientseite geladen sind. Bis dahin sollten Sie eine Ladeanzeige haben, oder Sie können diese Daten laden, wenn der Login-Prozess / die Anwendung startet.

limitTo kann bei der Suche nicht helfen, da Sie die Ergebnisse einschränken.

    
Sajeetharan 25.01.2018 15:23
quelle
2

Das Problem ist nicht das Array, der Browser kann das leicht handhaben, das Problem ist, dass Sie alle 3k DOM-Elemente rendern, das ist wirklich schwere Arbeit selbst für eine tatsächliche Maschine, auch da es Bindungen in jedem dom-Element gibt {{}} werden von AngularJs angeschaut, ich habe das gleiche Problem und habe Virtuelle Wiederholung von AngularJS Material gelöst Das macht nicht die ganzen 3k-DOM-Elemente, die durch das ng-repeat erzeugt werden, sondern nur die, die sichtbar sind. Außerdem habe ich eine andere Bibliothek gefunden, wenn du kein Angular-Material verwenden willst. Dies scheint auf die gleiche Weise zu funktionieren: Eckige VS-Wiederholung

    
Luis Gonzalez 20.01.2018 15:30
quelle
1

Sie können versuchen, das limitTo in ng-repeat in angularjs zu filtern, was das zusätzliche Argument zum Starten der Iteration erfordert.

Ссылка

Beim Scrollen können Sie dieses Argument basierend auf der Anzahl der ausstehenden oder für das Rendering übrig gebliebenen Elemente oder der Anzahl der bereits gerenderten Elemente ändern. Dies sollte Ihnen beim selektiven Laden von Scroll-Daten helfen.

    
K K 24.01.2018 11:58
quelle