I'm using Angular Material md-virtual-repeat directive to improve performance with thousands items within a md-list.
However, when I scroll down and then up, the ordering is not preserved at all . At the beginning, my items are sorted by date and it's fine. When I start scrolling, ordering gets completely messed up.
Here's my markup:
<md-virtual-repeat-container class="flex flex-layout md-list indigo" ng-if="tracking.loaded">
<div md-virtual-repeat="marker in tracking.mapMarkers | orderBy: 'timestamp':true" class="md-list-item inset" style="height: 72.6px;">
<div class="md-list-item-content">
<h3 class="text-md">{{ ::marker.timestamp | time }}</h3>
</div>
</div>
</md-virtual-repeat-container>
And my controller:
self.mapMarkers = [];
...
// In a function which is called within a promise
_.each(_.without(_.reject(data.Positions, function(position){ return position.Id === currentPosition.Id; })), function (pos) {
var location = new google.maps.LatLng(pos.Latitude, pos.Longitude);
self.mapMarkers.push(new google.maps.Marker({
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(12, 12),
anchor: new google.maps.Point(4, 4)
},
position: location,
address: pos.Address,
timestamp: pos.Timestamp,
map: self.map
}));
});
I solved my problem. It appears md-virtual-repeat fails recycling items correctly if one-way binding is used (notice my :: syntax in my markup). Seems obvious after all.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.