I encountered some issues while using ui-scroll in my application.
My goal is to have ui-scroll function on the same datasource that is used to populate two tables. By scrolling one table, I want the other table created from the same data source to also scroll simultaneously.
Although I attempted to achieve this with the sample code provided below, it did not work as expected.
The behavior of the lists becomes strange when scrolling either of the tables; the list size increases and empty rows are displayed. This issue can be observed in the linked Plunker example.
Furthermore, changing the data only affects the first table, leaving the second table unaffected.
I am struggling to synchronize the scrolling between the two tables (apologies for any confusion).
Below is a breakdown of how I implemented it:
Template:
<table border="1">
<tbody>
<td>
<table>
<tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
<tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
<tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
Controller:
var datasource = {};
datasource.get = function (index, count, success) {
$timeout(function () {
var result = [];
for (var i = index; i <= index + count - 1; i++) {
result.push("item #" + i);
}
success(result);
}, 100);
};
$scope.datasource = datasource;
https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview
I would greatly appreciate any assistance. Thank you in advance.
Additionally, while scrolling rapidly, the first and last rows added by ui-scroll for calculation purposes tend to exceed a height of 100px. How can I address this? Can they simply be hidden?
Here is an image depicting the issue: https://i.sstatic.net/uPX0Y.png