AngularJS - sorting/organizing a md-virtual-repeat - angularjs

Question

Is there a way to organize/sort a md-virtual-repeat?
Im feeding it an array of data for example: {a: "123", b: "321"} and then I can do {{loop.a}} and {{loop.b}} for example.
But what if I wanted to make it so that it will show the highest value in B at the top, and its lowest value on the bottom. Descending Order. How would I achieve that?
My code for the actual ng-repeat process is following:
window.proxies=[];
$scope.nproxies={
_l:0,
_t:0,
getItemAtIndex: function(i) {
if (i>this._l) {
if (this._t<=i) {
this._t+=5;
this._l=this._t;
};
}
return window.proxies[i];
},
getLength: function() {
return window.proxies.length < 8 ? 8 : window.proxies.length;
}
};
Basically its setup to get only if there is actually more to get, but always have atleast 8 "rows" setup, so essentially my table will atleast always have 8 minimum rows (While those rows could be empty) its just a better way to make it look like a proper table.
It does everything essentially like the official demo.
But as you can see, there isnt exactly a way for me to change organization due to how it gets the values, by index :/
The only way I see of filtering anything here is by grabbing window.proxies and shuffling, ordering whatever and then returning it back to window.proxies. The issue with that is its relatively slow, will often UI block for large values and could cause race-conditions.
Any ideas appreciated!

Answer 1

The best way to have smooth UI with sorted md-virtual-repeat displaying large amount of sorted data is to sort your dataset on server side, otherwise you'll get very awkward user experience. Consider the case, when you load another portion of data, and the items of this data should be inserted into different locations of the sorted dataset. This will cause either your user looses actual position while scrolling or not see new data at all (or both).
If your dataset is not too large (less than 20k records in case of using AngularJS), you can load the whole dataset to client side, sort it and then feed it to md-virtual-repeat, which will display only the items that may be displayed in the container (and not the whole dataset) and reuse existing items while scrolling.
Here is an example of client-side sorting of 10K records, where proxies are sorted by proxy port in descending order: https://plnkr.co/edit/mbMjakZFeHoQeM5OLCfh?p=preview . It took 12ms on my machine. I don't know how much metadata on proxies you have, but in my case 10K records size was 50KB, which is smaller than size of most of the decorative images on the page...
HTML
<div ng-controller="ctrl as ctrl" ng-cloak="">
<p>Processing time: {{ctrl.sortTime}}ms</p>
<md-content layout="column">
<md-virtual-repeat-container id="vertical-container">
<div md-virtual-repeat="item in ctrl.items" md-on-demand="" class="repeated-item" flex="">
{{item.n}}:{{item.p}}
</div>
</md-virtual-repeat-container>
</md-content>
</div>
JavaScript
angular
.module('app', ['ngMaterial'])
.controller('ctrl', function($http, $scope) {
var ctrl = this;
Promise.all([ // emulate pagination
$http.get('data0.json'),
$http.get('data1.json')
]).then(function(responses) {
$scope.$apply(function() {
var t = Date.now();
ctrl.items = {
data: responses.reduce(function(a, r) {
return a.concat(r.data) // Combine all responses
}, []).sort(function(a, b) { // Sort by 'p' property in descending order
if(a.p > b.p) return -1;
if(a.p < b.p) return 1;
return 0;
}),
getItemAtIndex: function(idx) { return ctrl.items.data[idx]; },
getLength: function() { return ctrl.items.data.length }
};
ctrl.sortTime = Date.now() - t;
});
});
});
Note:
Also, browser has only one UI thread, and memory allocated to web workers is isolated, so the UI may be slow, but you can never get into situation of race-condition when using JavaScript (either server side or client side).