Question

有没有办法组织/排序md-virtual-repeat？我给它提供了一系列数据，例如：{a: "123", b: "321"}，然后我可以{{loop.a}}和{{loop.b}}。

但是如果我想这样做会使它在顶部显示B中的最高值，而在底部显示最低值。降序排列。我将如何实现这一目标？

我的实际ng-repeat过程的代码如下：

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;
    }
};

基本上它的设置只有在实际上有更多的东西才能获得，但总是至少有8行和34行＃34;设置，所以基本上我的表将至少有8个最小行（虽然这些行可能是空的）它只是一个更好的方式使它看起来像一个正确的表。

它完全像官方演示一样。

但正如你所看到的那样，根据索引的不同，我没有办法改变组织方式：/

我在这里看到过滤任何东西的唯一方法是抓住window.proxies和shuffling，排序任何东西然后将它返回到window.proxies。问题在于它相对较慢，通常会阻止大值的UI，并可能导致竞争条件。

任何想法都赞赏！

Answer 1

使用排序md-virtual-repeat显示大量排序数据的流畅UI的最佳方法是在服务器端对数据集进行排序，否则您将获得非常尴尬的用户体验。考虑这种情况，当您加载另一部分数据时，应将这些数据项插入到已排序数据集的不同位置。这将导致您的用户在滚动时丢失实际位置或根本看不到新数据（或两者）。

如果您的数据集不是太大（使用AngularJS时记录少于20k），您可以将整个数据集加载到客户端，对其进行排序，然后将其提供给md-virtual-repeat，这将只显示可以在容器中显示的项目（而不是整个数据集），并在滚动时重用现有项目。

以下是10K记录的客户端排序示例，其中代理按代理端口按降序排序：https://plnkr.co/edit/mbMjakZFeHoQeM5OLCfh?p=preview。我的机器花了12毫秒。我不知道您拥有的代理服务器有多少元数据，但在我的情况下，10K记录大小为50KB，小于页面上大多数装饰图像的大小...

<强> 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;
      });
    });
  });

<强> 注意：的此外，浏览器只有一个UI线程，分配给Web worker的内存是隔离的，因此UI可能很慢，但在使用JavaScript（服务器端或客户端）时，您永远无法进入竞争状态。

AngularJS - 排序/组织md-virtual-repeat

1 个答案: