Generally ng-repeat is used to represent the objects and arrays in the view from the controller.It is used for repeating each element in the group of data.Here I want to know the alternate way for representing the group of data in the view without using ng-repeat.
Although the answer is dependent on situation in which you provide solutions anyway,
As per my development experience ng-repeat is good if you data is very less.and if data is heavy the performance of ng-repeat reduces considerable amount.
Inorder to solve above problem we can go for custom directives
Here are some of the directives which you can look for getting some idea
AngularJS ng-repeat Alternative Approach
This document will give all step by step approach to create custom directives.
This is about alternative approach to ng-repeat to handle heavy data
binding with better page performance. This article will provide
insights of how to replace particular ng-repeat with particular data.
AngularJS directive for much more quicker lists rendering
A custom directive you can add and you can customize based on your requirements with following features
Shallow list watch (ngRepeat uses deep watch)
Animations support
Special service to cause list render outside of digest cycle
Smooth scrolling even on heavy compited lists (check example)
About 200% performance boost
Still hesitating? Try to scroll page with ng-repeat list and a page with quick-ng-repeat
Apart from this i can go for some solutions such as pagination lazy loading etc to improve performance
ng-repeat is good to use when you don't have a large amount of data. There is an advantage using ng-repeat, whenever you use track by $index, it will do some hashing, and when it encounters a similar kind of element as you update the model properties, it won't recalculate the layout for that particular element.Behind the scenes, ngRepeat adds a $$hashKey property to each task to keep track of it.
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Related
Difference between angular ng-repeat and angular material md-virtual-repeat?
When should i use one or another?
ng-repeat renders all elements in list, its less performant on large lists.
md-virtual-repeat renders list what is visible on viewport, it doesn't render all elements of list, when user scrolls in case of large lists it then seemlesly renders other elements, this way its performant and should be used when working with large lists.
Angular documentation tells it pretty clearly:
Virtual repeat is a limited substitute for ng-repeat that renders only enough dom nodes to fill the container and recycling them as the user scrolls. Arrays, but not objects are supported for iteration. Track by, as alias, and (key, value) syntax are not supported.
Source
md-virtual-repeat is similar to ng-repeat but it is very useful when you want to load large amount of data.
Consider you have to load a 100,000 records. In this case if it is ng-repeat then it will load all the data initially. So the user may get frustrated while it is loading. If the user wants the first 50 rows of data only, ng-repeat forces him to wait until all 100,000 records load!
To avoid this in material we have md-virtual-repeat. It loads the next set of data when there is a demand for it (the user scrolls for more data)
Ultimately, the loading time is optimized if you use md-virtual-repeat.
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
Source
ng-repeat loads the entire data set before rendering to the UI. It is extremely useful when dealing with a smaller list. To ensure that it is most effective it is advisable to use track by and or limit to in the ng-repeat expression. A great md-data-table example that uses ng-repeat is Daniel Nagy's table
With a large list of records ng-repeat becomes very much slower. If it is slow the recommended usage is to switch to md-virtual-repeat
md-virtual-repeat specifies an element to repeat using virtual scrolling.
Virtual repeat is a limited substitute for ng-repeat that renders only enough DOM nodes to fill the container and recycling them as the user scrolls.
Source
md-virtual-repeat only loads the data on demand - the user scrolls. It loads the data much quicker when having a large result set. md-virtual-repeat becomes cumbersome when inserting it into a table.
Am using angular in this simple search results page and instead of adding jquery masonry for layout and deal with timing issues I decided to give this directive a try since it plays nicely with the ng-repeat.
Unfortunately when I have a large dataset and the ng-repeat takes a second or two, the page gets all screw up and all items render on top of each other. Someone claimed that it has something to do with the last element in the ng-repeat not being loaded by the time the layout is created through the plugin.
Someone else recommended a timeout to create a delay, this option works but the user can see the layout being built, which is not the best solution.
Anyone out there that has use this directive to create a masonry layout with a large dataset?
I am creating a standard table using angular's ng-repeat directive. My table will be carrying 10000 cells. As far as I understand, ng-repeat creates watches on every cell and this can significantly erode the performance of my app. Any clues on how I can restrict the number of watches while ensuring that data binding functions the way it shoul.
I have a plnkr here. The template for table is in the file layout.html
http://plnkr.co/edit/Hahh4uyQ130zOS8noC3D
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:
Does ng-repeat (like outputting a list of json objects) necessarily create two way binding?
Is there a simple way to do ng-repeat using only one way binding? (preferably do not need external module)
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
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.
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.
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.
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!!!
I'd like to implement a result list with multiple types of display (line, grid, detailed or not, etc, ...)
What is the best approach to do this?
I was thinking of using ng-show but I'm wondering about performances, do hidden elements are processed in a way or is it ok to have like 4 or 5 types of layout and display one at a time using ng-show?
You can use ng-switch instead. The difference is that it only renders elements that meet the condition. But then again, if you pre-load them initially and just show/hide, the switches between them will be fast while the initial load will be longer (slightly). While with ng-switch you will have a certain rendering time for each display.
I would say that it's OK to use ng-show unless you have a lot of data. Try it out and see what works better for you.
Even ng-view could be an option.