Javascript 为ng repeat加载大量元素

我有一个页面需要从API加载数千行（通过AngularJS服务）。我决定一次加载100个，而不是一次全部加载，ala:

$scope.fetchTransactions = function(page) {
  TransactionService.get($scope.product, page).then(function(response) {
    $scope.transactions = $scope.transactions.concat(response.data.transactions);

    if(response.data.transactions.length > 0) {
      $timeout(function() {
        $scope.fetchTransactions(page + 1);
      }, 1000);
    }
  });
}
$scope.fetchTransactions(1);

这将一次加载100个事务。在我看来，我有一个表和一个

tr

，看起来像：

<tr class="fade-in-repeat" ng-repeat="transaction in transactions | orderBy: ['-txid', '-time']>

试着像这样预过滤它（注入

$filter

）： 也可以使用

跟踪方式

：

---

当您使用

ng repeat

处理数千行时，使用angular是一个坏主意，因为它会为每个元素添加$watch，因此会直接影响性能

所以现在你能做的最好的事情就是和你自己一起工作， 我建议您创建自己的指令，并使用本机JavaScript API或JQuery迭代元素，这无关紧要，我还建议使用for DOM操作（您是否希望使用CreateDocumentFragment）

示例：

  mainApp.directive("myRepeater", function () {
   var LIST_ITEM = "li";
        return {            
            restrict: "A",
            link: function (scope, element, attrs) {
                var rawElm = element[0];        
                scope.$watch(attrs.source, function(newValue) {
                    if (!newValue || !newValue.length || newValue.length === 0) return;

                    // wipe the previous list
                    rawElm.innerHTML = "";
                    var frag = document.createDocumentFragment();

                    newValue.forEach(function (item) {
                        var listItemNd = document.createElement(LIST_ITEM);
                        var textNd = document.createTextNode("your text");
                        listItemNd.appendChild(textNd);
                        frag.appendChild(listItemNd);
                    });

                    rawElm.appendChild(frag);
                });
            }
        };
    });

---

你能发布一个事务对象的JSON表示吗？

product\u id

字段在哪里？我更新了相应的字段。你看下面的url可以帮助使用分页，使用较小的页面大小或无限滚动

跟踪

做什么？在这里检查我的答案：这仍然会导致加载期间浏览器冻结。我删除了

过滤器

，看看这是否是瓶颈，也许中继器中有大量绑定。angular dirty使用每个$digest检查它们中的每一个。如果是这种情况，您应该提供更多关于您需要什么绑定的信息，可能还需要一个plunker，以便重现问题。

$scope.fetchTransactions = function(page) {
  TransactionService.get($scope.product, page).then(function(response) {

    if(response.data.transactions.length > 0) {

      var transactions = $scope.transactions.concat(response.data.transactions);
      $scope.transactions = $filter('orderBy')(transactions, ['-txid', '-time']);

      $timeout(function() {
        $scope.fetchTransactions(page + 1);
      }, 1000);
    }
  });
}

<tr class="fade-in-repeat" 
    ng-repeat="transaction in transactions track by transaction ._id">

  mainApp.directive("myRepeater", function () {
   var LIST_ITEM = "li";
        return {            
            restrict: "A",
            link: function (scope, element, attrs) {
                var rawElm = element[0];        
                scope.$watch(attrs.source, function(newValue) {
                    if (!newValue || !newValue.length || newValue.length === 0) return;

                    // wipe the previous list
                    rawElm.innerHTML = "";
                    var frag = document.createDocumentFragment();

                    newValue.forEach(function (item) {
                        var listItemNd = document.createElement(LIST_ITEM);
                        var textNd = document.createTextNode("your text");
                        listItemNd.appendChild(textNd);
                        frag.appendChild(listItemNd);
                    });

                    rawElm.appendChild(frag);
                });
            }
        };
    });