CODEWITHSUNDEEP
javascriptangularjshtml-tableangularjs-ng-repeatdom-manipulation
kenshin9
kenshin9

Reputation: 2365

Render table rows without binding for performance

I'm using Angular 1.4. It's commonly known that ng-repeat can have some performance issues when rendering a large number of rows for things like tables. But I was wondering if there was an optimal way of using ng-repeat or some alternative iteration to simply render an array of data I have, for a table.

I don't need any binding, as it's just outputting data for a report. I've tried some suggestions like one-time binding, but it still takes a good amount of time (10 seconds or more for 1000 records or so). Other non-Angular methods I've tried are pre-rendering the HTML on the backend, and then returning the HTML instead of the data array. And I had a custom directive that just added that HTML to the element. This was less than a second for even 2000 rows (obviously since I didn't use Angular).

But it would be nice if I could accomplish the same thing in Angular, or even do something similar in the controller on the Angular side. Any input would be appreciated.

Upvotes: 1

Views: 404

Answers (1)

opticon
opticon

Reputation: 3614

You can use one-way binding for this:

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

Note that you have to add the :: syntax to each entry in the repeater.

I'm not sure how complex your logic is, but 10 seconds for 1000 rows sounds absurd.

Upvotes: 0

Related Questions