CODEWITHSUNDEEP
javascriptangularjs
Anonymoose
Anonymoose

Reputation: 2461

Performance of ng-repeat

I have an application with a code completion editor. When the user starts typing, an array proposal is created and displayed. The creation of the array goes very fast, almost instant. Worst case the array has a length of around 500 items.

The problem is that the array constantly changes value as the user is typing. The rendering of the ng-repeat is taking about 1-2 seconds which is a huge delay during typing. I don't really understand why this is a problem, in terms of computing an array of 500 items is peanuts.

I'd rather not limit the array because the user can scroll through it. Are there any other suggestions to speed things up? 

<li ng-repeat="proposal in proposals"  ng-dblclick="copyProposal()" ng-class="{selected : proposal.selected}">
    <img src="assets/img/key.png" ng-show="proposal.isKey" class="icon"/>
    {{proposal.text}} 
    <span ng-show="proposal.type" class="detail">- {{proposal.type}}</span>
</li>

Upvotes: 3

Views: 387

Answers (2)

Sandeep
Sandeep

Reputation: 1479

If your List will not change in runtime, you can use one way binding. Your Application performance will increase with one way binding, since its remove watch digest cycle.

Like :

<li ng-repeat="proposal in ::proposals"  ng-dblclick="copyProposal()" ng-class="{selected : proposal.selected}">
    <img src="assets/img/key.png" ng-show="proposal.isKey" class="icon"/>
    {{proposal.text}} 
    <span ng-show="proposal.type" class="detail">- {{proposal.type}}</span>
</li>

Upvotes: 0

Komo
Komo

Reputation: 2138

In addition to track by, you can use single-way binding instead of double binding to reduce watchers :

ng-repeat="proposal in proposals track by proposal.id" 
{{::proposal.text}}
{{::proposal.type}}

Another thing you can look into (if you use ng-model somewhere, like your text input) is ng-model-options debounce property. You can specify a delay after which the model update is done. For example set debounce to 500ms so that it doesn't update multiple times if the user types in quick succession.

ng-model-options="{ debounce: 500 }"

(Angular >= 1.3)

Upvotes: 3

Related Questions