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.
Related
We have a Chat application. To show chat history we are using ng-repeat. when number of records in history is more than 100 then there is lag in typing in new message text box. When I type something in text box it takes around 0.5 to 1 seconds to display that character in text box. This lag is not coming when number of records in ng-repeat less.
How to resolve this issue?
Don't use ng-repeat for chat history, because Angular maintains observers to every line in ng-repeat. You might also try one-time bindings in ng-repeat and track by, but I would recommend old-style DOM manipulation in history widget. Because history is usually immutable append-only thing, there is no point to put it under control of Angularjs.
It is obviously an ng-repeat performance problem. You can get over it by using "track by".
<div ng-repeat="item in items track by $index"></div>
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.
I have 5 tabs of angular material and my heaviest tab consist of 1 ui-grid. If i initialize it with 1000 rows and 50 columns (which should be okay according to their demos), changing the tab from one to another became extremely slow (8-18 second for "non-grid tabs" and 22-crash seconds for "grid tab"). It is slow even if i disable the animation between tabpanel transitions.
Is there any solution to speed up the tabs (or grid)?
Found!
Assigning a very small number to the attribute "exceesRows" is the only way to speed up the ui-grid (and that really helps). Using this, you actually restrict the number of rows to be loaded for each user view. And now i see the slowness has nothing to do with the md-tab.
I have a weird problem whereby a <select> control stops showing its drop down list in IE11 using AngularJS after changing the value (twice).
Chrome (42) and FF (37) do not exhibit the issue.
Plunker: http://plnkr.co/edit/Ea0nMnPxXdqm8O59NyZS?p=preview
Fiddle: http://jsfiddle.net/xydvqo0q/
Steps:
Click the select to open its drop down list.
Select either of the two listed options. (It closes and a couple of other fields in the page update their values.)
Click to open again.
Select the other option. (It closes and the fields update again.)
Click to open the drop down list again. Will no longer open
Neither mouse click, nor Alt-downarrow will show the drop down once it gets into this state.
(Further, other selects on the same page also stop showing their drop down lists, and there appears to be a general control/windowing issue for the page - e.g. you can't select HTML text, and other controls won't show the focus or caret. Seems like IE loses the plot about which is the active "window" and it seems to be stuck inside the select. Pressing Tab a few times gets it out of this stuck state.)
Now, an IE control/windowing bug isn't unusual. But this is weird because of the specific set of requirements to reproduce. I've stripped back the example to what seems to be the minimum required to reproduce (yet you might think there's heaps of stuff in the page that should be irrelevant - afraid not).
The page needs the following for the issue to show:
The nested table (which lists "hello"s) must be there (and it must be nested - if it's not inside another table then the problem goes away). (I made it list hellos to eliminate it listing scope data to eliminate that as a cause.)
The table row which contains {{selecteditem.number}} must be there, and must be AFTER the nested table (moving it before removes the issue). I moved it to a separate table and the problem remains.
The selecteditem.number data must be different for the two items. If the "number" values are the same for the two items, it will not show the issue.
The number of "sub items" for each of the two items must be the SAME (meaning the nested table ends up with the same number of rows). If you add another sub-item to one of the items, the problem is fixed. If you add a sub-item to both (so they both have two) then the problem returns.
(Are you thinking I'm crazy yet? I thought I was. But wait there's more...)
The nested table must have the CSS property border-collapse: collapse. Without this property, or with a different value for this property, the issue doesn't occur. Note: the table can inherit this property from the parent table, or from a table CSS rule, or from a class (as the demo shows) and the issue still occurs. Removing it "live" using IE's F12 dev console and the issue gets fixed.
The TDs of the nested table - i.e. the "hellos" - must have a CSS border. They can inherit this, or obtain it from the class (as per the demo).
Basically, I have to tell the client they can have a collapsed-bordered table to show sub-items in the table of fields (there are usually many more than in the demo) or have a drop down list, but not both. (Or don't use IE, which isn't an option, or change the order of you form, which then would make no sense to the users.)
I tried not using ng-options (and instead ng-repeat-ing an option) but I get the same result (I'm limited to 2 links so here's the plnkr ID: 95XcM9j2eY70jUK10UrH).
I may dump the select entirely.
We're building a new time entry system that uses legacy data. I've attached a screen that shows the UI.
`Here's a link to a fiddle with some mostly working code.'
http://jsfiddle.net/dgdavidson/GMUK5/3/
As you can see, we have a row of data that contains a weeks worth of time entries and comments for each entry.
Problems now include getting data to update. For example, clicking 'New Entry' or the delete button doesn't update the table until those buttons are clicked a second time. Do we have to force an update?
For a change to time entries hours or comments, because the data is in an object inside of an object how do we capture the change? It seems we need the $index for the row as well as the $index for the date we're changing.
Something we haven't even started on yet is another row underneath the total hours row that will be dropdowns so that the user can enter the location they were at for that days work.
We feel that Angular is a good choice for what we are doing so I suppose my biggest question is are we going in the right direction with this or do we have a fundamental architectural issue?