CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Dionysian
Dionysian

Reputation: 1235

Simple One way binding for ng-repeat?

I have read some articles that said ng-repeat would led to poor performance if there is over 2000 items, because there are too many two way binding to watch. I am new to angularjs and have trouble understanding the relationship between ng-repeat and two-way binding:

  1. Does ng-repeat (like outputting a list of json objects) necessarily create two way binding?

  2. Is there a simple way to do ng-repeat using only one way binding? (preferably do not need external module)

Upvotes: 30

Views: 26983

Answers (4)

Cindy Conway
Cindy Conway

Reputation: 1974

Like user1843640 mentioned, if you are on Angular 1.3, you can use one-time-binding, but, just for clarity, you need to put the :: on all the bindings, not just the repeater. The docs say do this:

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

But, if I count the watchers, this only removed one. To really drop the number of two-way-bindings, place the :: on the bindings within the repeater, like this:

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

Here are two plunkers that will display the number of watchers:

All Bindings
Repeater Only

Thanks goes out to Miraage for provinding the function to count the watchers https://stackoverflow.com/a/23470578/2200446

Upvotes: 58

user1843640
user1843640

Reputation: 3939

For anyone using or upgrading to Angular 1.3 you can now use "one-time binding". For ng-repeat it would look like this:

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

Notice the ::items syntax.

For more information check the Angular documentation for expressions.

Upvotes: 17

JSAddict
JSAddict

Reputation: 12427

  1. what ever is generated by ng-model will be having a watcher on data(model) which reduces the page performance if it crosses 200 watchers.

  2. Refer this for ONE WAY BINDING http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ but make sure you use it properly

Hope it helps!!!

Upvotes: 2

hiattp
hiattp

Reputation: 2336

This blog post presents some interesting solutions. The end result was:

Upgrade to AngularJS 1.1.5 and use limitTo together with Infinite scrolling. AngularJS ng-repeat offers from version 1.1.4 the limitTo option. I slightly adapted the Infinite Scroll directive to make scrolling within a container possible that does not have height 100% of window.

Basically you limit the number of objects you initially render, then use the Infinite scrolling directive to render more as needed. Since you don't want an external module, just mimic the infinite scroll functionality as needed with your own script.

Note: This should solve your performance problem but it won't remove two-way binding.

Upvotes: 3

Related Questions