In my view I have a table that will be filled dinamycally with data from server. This table should have at least 5 rows, which means that if my server doesn't return 5 sets of data, the table should be filled with 5 - (n_sets_returned). To make that happen I guess the easy way would be to define a variable and set it to the number of sets returned, but I can't make it. I tried as follow:
<tbody class="center-alignment xcompact" ng-init="cont = 0">
<tr ng-repeat="row in data">
<td>{{row.val1}}</td>
<td>{{row.val2}}</td>
<td>{{row.val3}}</td>
<td>{{row.val5}}</td>
{{cont = $index}}
</tr>
<tr ng-repeat="n in [] | range:(5-cont)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
The problem is I don't even know if this would work (probably not) because the empty rows appears before the filled ones, what means Angular obviously doesn't wait for server response to fill the empty rows.
I'm pretty new at Angular. Any help will be appreciated. Thanks.
Related
I have two arrays of variable lenghts containing html which need to be displayed side by side in a table by index. So arrayA[0] should be in the same row as arrayB[0], and so on.
I figured I could do this with two ng-repeat-start directives, e.g.:
<table>
<tbody ng-repeat-start="arrayA">
<tr ng-repeat-start="arrayB">
<td bind-html="arrayA.Details"></td>
<td bind-html="arrayB.Details"></td>
<tr ng-repeat-end></tr>
<tbody ng-repeat-end></tbody>
</table>
However this does not seem to work. Any ideas?
Thanks
We are building an application to show a table with timetable data.
On the interface the user can set different filters.
I could use a data-grid which would speed up about everything.
I could use a table without grouping and use some sort of lazy fetching which would speed things up.
However we like the layout as is.
The consequence is that the watches are way over 2000 and we are experiencing bottlenecks. It is not that we show hundredths of rows.
How can we make this a bit more performant.
I tried track by, which didn't improve a thing. I tried bind-once but that didn't work either. (Honestly I have no clue how to make it work with key,value objects).
One performance trick might be changing the filters, move and chain them in the controller?
As you also can see, we re-use the same filters a lot, however this is necessary for the group by.
I also haven't seen any lazy-fetching mechanism which works with this kind of custom table / group by.
Hopefully you can help me to point me in the right direction, since I really kinda like the current layout.
The dataset is being displayed in a table and is grouped by date.
Example output:
hrefDateA | hrefDateB | hrefDateC | hrefDateD
DateA
RowA with columns
RowB with columns
RowC with columns
DateB
RowD with columns
RowE with columns
DateC
RowA with columns
RowB with columns
RowC with columns
....
<div ng-if="includeDesktopTemplate" ng-show="whateverdata.length > 0">
<div>
Jump to:
<a ng-href="#tableheader{{$index}}" ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'" class="someclass">
{{key}}
</a>
</div>
<hr />
<table>
<thead>
<tr>
<th class="timetablerow">HeaderA</th>
<th class="timetablerow">HeaderB</th>
<th class="timetablerow">HeaderC</th>
<th class="timetablerow">HeaderD</th>
<th class="timetablerow">HeaderE</th>
<th class="timetablerow">HeaderF</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'">
<tr>
<td colspan="6" class="desktoptablegroupby" id="tableheader{{$index}}">
{{key}}
</td>
</tr>
<tr>
<td colspan="6">
<hr class="redbackground" />
</td>
</tr>
<tr ng-repeat="row in value | filter:filterA() | filter:filterB() | filter:filterC()" ng-class-odd="'odd'" ng-class-even="'even'">
<td class="timetablerow">
{{row.propertyA}}
</td>
<td class="timetablerow">
{{row.propertyB}}
</td>
<td class="timetablerow">
{{row.propertyC}} - {{row.propertyD}}
</td>
<td class="timetablerow">
{{row.propertyD}}
</td>
<td class="timetablerow">
{{row.propertyE}}
</td>
<td class="timetablerow">
<div ng-show="{{row.propertyF}}">
<md-tooltip md-direction="{{tooltip.tipDirection}}">
{{row.propertyF}}
</md-tooltip>
<md-icon md-svg-src="~/Content/comment.svg">
</md-icon>
</div>
</td>
</tr>
</tbody>
</table>
<br /><br />
</div>
If I include the code below, watches can go from 3k to 6k
<div ng-show="{{row.propertyF}}">
<md-tooltip md-direction="{{tooltip.tipDirection}}">
{{row.propertyF}}
</md-tooltip>
<md-icon md-svg-src="~/Content/comment.svg">
</md-icon>
</div>
Regarding the code above. One column would show an icon with a tooltip which contains the value of an extra field of the dataset, only when the field contains data. But this also gives issues when the filters are being used (so redraw of screen), since other rows are showing the tooltip then, even when the value of the field of the specific row does not contain a value.(DOM/update/filter issue?)
This is a limitation by the way AngularJS handles change detection and rendering. There's really no easy solution - with emphasis on easy. What I've done on several occasions is use a technique often refered to as virtual-scroll/virtual-repeat. What it basically does is that it only renders the elements that can be seen in the viewport, but adds offsets to the top and bottom of the list/table to keep the scrollbar a constant size, regardless of how many elements are actually rendered. Then whenever you scroll, the elements that pop into view is seamlessly rendered before they become visible. This gives the illusion that it's a single long list/table, when it really only renders what is visible.
There are many libraries that implement this technique. I've personally got experience with the one called angular-vs-repeat but you should take a look at a few and evaluation which fits best your use case. I've also on one occasion implemented my own virtual scroll and it was certainly doable (my usecase in that scenario was that I needed virtual scroll to work both vertically and horizontally).
I'm new to Angular, as will probably become apparent!
I've created a view with a few tables of data to show users different statistics. A simple example would be:
<div class="table-container">
<table class="percs">
<thead>
<tr>
<td>Stat Name</td>
<td>Stat Value</td>
<td>Stat bar</td>
</tr>
</thead>
<tbody>
<tr>
<td>Stat 1</td>
<td>{{ statPercs.stat1 }}</td>
<td><uib-progressbar value="statPercs.stat1"></uib-progressbar></td>
</tr>
<tr>
<td>Stat 2</td>
<td>{{ statPercs.stat2 }}</td>
<td><uib-progressbar value="statPercs.stat2"></uib-progressbar></td>
</tr>
</tbody>
</table>
</div>
I'm using the progressbar just for a small visual representation of the data. However if my understanding so far is correct, although each row in the table only references one value it will incur 2 $$watchers by being referenced in 2 separate tags.
Is it possible to achieve this with just one binding per value (i.e. "statPercs.stat1", "statPercs.stat2", etc) but still be able to re-use that value in multiple columns of the table?
Or even better still, one binding for the object itself (i.e. "statPercs") and still be able to use the values contained in that object in multiple places in the table?
I have two groups of arrays.
First contains header fields =>
$scope.fields=[field0, field1, field2,...,field20];
Second has multiple arrays of data with respect to above field =>
$scope.data=[
[A,B,C,...,someVal20],
[Q,W,E,...,someVal20],
[R,T,Y,...,someVal20],
...
[B,N,M,...,someVal20]
];
Values of fields are shown in a drop down
<select ng-model="filteredOption" ng-options="option.label for option in fields"></select>
The same field values are used as table header.
<tr>
<th ng-repeat="f in fields">{{f.label}}</th>
</tr>
And the data as
<tr ng-repeat="d in data">
<td ng-repeat="i in d track by $index">{{i}}</td>
</tr>
Question is
How do I sort (ascending) the data based on the 'nth' field (which user selects from drop down)?
Its confusing because header and data are two distinct arrays, and data is not in key,value format.
Plunkr here
Column Header - ColumnName in you case it is field0
<th>
<a href="#" ng-click="sortType = 'field0'; sortReverse = !sortReverse">
field0
</a>
</th>
On Column header click it sets the properties of sortType and sortReverse
<tr ng-repeat="d in data | orderBy:sortType:sortReverse"">
<td ng-repeat="i in d track by $index">{{i}}</td>
</tr>
useful link for sorting https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
Thanks to this answer, I've found working solution.
I tracked the selected field's position ($scope.sorter set to that $index). And used it as orderBy:sorter
Still, keeping this question open for others to suggest more acceptable solution.
Maybe I am completely confused how td works as I haven't used tables in my code for yeeaars (strong div believer), or maybe I am confused on how ng-if is attempting to separate my data.
Either way, I am not getting my expected results, but there is otherwise nothing wrong with the code, I think my logic is just off.
Here is a working Plunker http://plnkr.co/edit/LoMEMBYc6kUodb9tcbfM?p=preview
<table>
<tr ng-repeat="z in waiverModalLinks">
<td ng-if="z.id=='color'" class="{{z.id}}">{{z.title}}</td>
<td ng-if="z.id==''" class="{{z.id}}">{{z.title}}</td>
</tr>
</table>
The ultimate end result is to have every other td a different color, however I realize that the current logic is going to put the colored td on the left and the non-colored td on the right. But that was the object I was working with before I realized I needed two separate columns, finding the need for a table in the first place.
But anyway, what is not working then is that.. well they are still stacked. I would expect to see the colored td on the left-hand side of the table and the non-colored td on the right-hand side of the table.
Where's the err in my logic?
Your data model seems to be the source of the confusion. You have a simple array, so each td will be in the same row. If you create a 2d array, you can make a new row for each inner array:
$scope.waiverModalLinks =[
[
{title:"1", link:"", id:"color"},
{title:"2", link:"", id:""}
],
[
{title:"3", link:"", id:"color"},
{title:"4", link:"", id:""}
]
];
And a simpler repeater:
<tr ng-repeat="row in waiverModalLinks">
<td ng-repeat="z in row" class="{{z.id}}">
{{z.title}}
</td>
</tr>
Plunkr: http://plnkr.co/edit/VeXBJcf3naI5bRttQ1Pt?p=preview
z.id is either equal to 'color', or an empty string, but can't be both at the same time. So every row will have at most one cell:
if z.id is equal to color, the generated dom will be
<tr ng-repeat="z in waiverModalLinks">
<td class="{{z.id}}">{{z.title}}</td>
<!-- removed second td -->
</tr>
if z.id is equal to ''', the generated dom will be
<tr ng-repeat="z in waiverModalLinks">
<!-- removed first td -->
<td class="{{z.id}}">{{z.title}}</td>
</tr>
You need two cells in every row: one blank and one filled, or vice-versa:
<table>
<tr ng-repeat="z in waiverModalLinks">
<td ng-if="z.id==''"></td>
<td class="{{z.id}}">{{z.title}}</td>
<td ng-if="z.id=='color'"></td>
</tr>
</table>