javascript - Speed issues with ngRepeat. Is it possible to reuse a DOM-part in AngularJS? -
i displaying list lot of data , getting slow fast (>5 entries = slow). tinkered around little bit , found not amount of data problem many dom elements generated.
i show table meta information. each table row there 2 more hidden table rows include detail data , edit form. clicking on row opens detail info , clicking on edit button switches edit row.
simplified plunkr without edit portion available here.
the problem each entry there 3 rows generated include ton of tags , data. pagination no solution since problem manifests in significant way few 4 or 5 entries. load detail data dynamically found bottleneck many tags ng-repeat has create. (am mistaken here?)
when cut out detail , edit portion page loads reasonably fast 10+ entries.
a solution write detail , edit part once , hide , dynamically shift around according entry. know direct dom manipulation frowned upon in angular. there better solution? a plunkr illustrates idea
i looked angular.element , updated second plunkr solution. still not sure if there not more elegant solution. implement , see if performance issues resolved it.
moving of dom part:
<td id="detailpiece"> reuse piece of dom? can done?<br /> tons of detail information, edit capability etc.<br /> {{detailitem.detail}} </td>
is achieved
angular.element('#detail'+index).append( angular.element('#detailpiece') );
still looks 'hacky' solution me empty table row , all.
Comments
Post a Comment