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.
Related
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.
I have an ng-repeat that consists of an activity item. Activity items consist of a title, description, and type (all strings). I have three input filters (title and description are done via textbox, type is done via select) that are set up with ng-model written as activityFilter.Title, activityFilter.Description, activityFilter.Type.
I have two questions from this:
1) I'm not sure why, but if I type a filter in the Description box, nothing happens (the filter does not occur). When I clear the Description box, the number of activity items doubles and then goes back to the proper number shortly thereafter. I'm assuming that there is a digest cycle period that resets it back to the correct number of items, but any thoughts as to why it would be doubling up when I clear it?
2) There is potential for there to be as many as 1000 activity items in this list. I'm already noticing performance issues when I get to 100 or so items. Is there a better way to do do things then use ng-repeat that will still take advantage of filters?
3) Currently I have the ng-repeat section done with a series of divs. Would it help improve performance if I switched it to an ng-repeat of directives?
I'm using Angular 1.3.x.
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've seen a lot of questions about the order in which ng-repeat finishes compared to other directives or things going on in Angular land, but I haven't been able to find an answer to how exactly it accomplishes this.
I have two ideas of how it could work.
First Way:
When ng-repeat's watcher triggers, it removes all elements it created from the DOM then creates all new elements in their place, even if many of those elements are the same (e.g. in the case of 1 item added to the backing array).
Second way: Since ng-repeat already keeps track of which elements go with which items in its backing collection, it simply removes the items that no longer exist in the collection and creates new elements for items that are new to the collection.
Which is it and why?
It's the second way: Angular tries to be smart about creating/removing DOM elements:
The ngRepeat directive provides a way to render a collection of items given a template. To do this, AngularJS compiles the given template and then clones it for each unique item in the collection. As the collection is mutated by the Controller, AngularJS adds, removes, and updates the relevant DOM elements as needed.
But, how does AngularJS know which actions to perform when? If you start to test the rendering, you'll discover that AngularJS doesn't brute force DOM creation; that is, it doesn't recreate the DOM for every rendering. Instead, it only creates a new DOM element when a completely new item has been introduced to the collection. If an existing item has been updated, AngularJS merely updates the relevant DOM properties rather than creating a new DOM node.
This can still impact performance unnecessarily, i.e. when passing elements by-value in a collection (there's an excellent example of this in the blog post linked above). That's why Angular supports "track by" for ngRepeat since version 1.2: It's a way to help Angular decide when DOM creation is necessary:
With this association in place, AngularJS will not $destroy and re-create DOM nodes unnecessarily. This can have a huge performance and user experience benefit.
The official documentation states:
You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collection.
For example: item in items track by item.id is a typical pattern when the items come from the database. In this case the object identity does not matter. Two objects are considered equivalent as long as their id property is same.
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