0

J'utilise Angular 1.4. Il est généralement connu que ng-repeat peut avoir des problèmes de performances lors du rendu d'un grand nombre de lignes pour des choses comme des tables. Mais je me demandais s'il y avait une façon optimale d'utiliser ng-repeat ou une itération alternative pour simplement rendre un tableau de données que j'ai, pour une table.Rendu des lignes de la table sans liaison pour les performances

Je n'ai pas besoin de liaison, car elle ne fait que produire des données pour un rapport. J'ai essayé quelques suggestions comme la liaison ponctuelle, mais cela prend encore beaucoup de temps (10 secondes ou plus pour 1000 enregistrements ou plus). D'autres méthodes non angulaires que j'ai essayées sont le pré-rendu du HTML sur le backend, puis le retour du HTML au lieu du tableau de données. Et j'ai eu une directive personnalisée qui vient d'ajouter ce HTML à l'élément. C'était moins d'une seconde pour 2000 lignes (évidemment puisque je n'utilisais pas Angular).

Mais ce serait bien si je pouvais accomplir la même chose en Angular, ou même faire quelque chose de similaire dans le contrôleur du côté angulaire. Toute contribution serait appréciée.

+0

Je me demande pourquoi vous voudriez rendre 1000 lignes. – ChiefTwoPencils

+0

Normalement, je le paginais, mais les utilisateurs veulent pouvoir voir toutes les données en même temps, ou faire un Ctrl + F pour trouver un enregistrement qu'ils recherchent. Il s'agit donc davantage d'une exigence commerciale. Bien que cela ne soit pas trop commun, le rapport qu'ils exécutent est basé sur une plage de dates, de sorte que le nombre d'enregistrements peut être important s'ils choisissent un intervalle de temps important. – kenshin9

+0

C'est ce que c'est alors je suppose. Je donnerais [utiliser ng-repeat avec parcimonie] (http://stackoverflow.com/documentation/angularjs/1921/profiling-and-performance/6270/7-simple-performance-improvements#t=20170220203549826701) un look incluant "autre approches "autres que la pagination. La vérité est qu'ils ne peuvent probablement pas les voir tous, il suffit de leur donner la perception qu'ils peuvent et les autres fonctionnalités que vous avez mentionnées peuvent encore être atteints. – ChiefTwoPencils

Répondre

0

Vous pouvez utiliser un moyen de liaison pour cela:

<ul ng-repeat="item in ::items"> 
    <li>{{ ::item.name }}</li> 
</ul> 

Notez que vous devez ajouter la syntaxe :: à chaque entrée dans le répéteur. Je ne suis pas sûr de la complexité de votre logique, mais 10 secondes pour 1000 lignes semble absurde.