Question

如何在每次ng-repeat迭代之间插入延迟，这样我的表将生成更慢的记录。有没有办法不使用ngAnimate。

<table>
    <tr ng-repeat="x in records">
        <td>{{x}}</td>
    </tr>
</table>

Answer 1

在你的情况下，一个可能的解决方案可能是采用源数组并使用_.chunk和$ timeout以递增的方式填充ng-repeat数组，如下所示：

index.html

<table>
  <tr ng-repeat="x in records track by $index">
    <td>{{x}}</td>
  </tr>
</table>

appCtrl.js

$scope.sourceData = [data, data, data];
$scope.records = [];

/**
  *@param source (array): the array with the data used to populate the ng-repeat array
  *@param target (array): the array to which ng-repeat points
  *@param delay (integer): the render delay, in milliseconds
  *@param renderSize (integer): the amount of list items to render between each delay
  *
**/
function delayedRender(source, target, delay, renderSize) {
  var promise = $q.resolve();

  function scheduleRender(partial) {
    Array.prototype.push.apply(target, partial);

    // the timeout will ensure that your next render won't occur before the delay
    return $timeout(function(){}, delay);
  }

  // _.chunk is a Lodash function that takes an array and chops it into smaller chunks. 
  // 'renderSize' is the size of these chunks.
  var partials = _.chunk(source, renderSize);
  var next;

  // here we schedule renders to occur only after 
  // the previous render is finished through the use of $q promises
  _.forEach(partials, function(partial) {
    next = scheduleRender.bind(null, partial);
    promise = promise.then(next);
  });
}

Answer 2

<强> [建议]

如果您的数据加载速度很慢，可能是因为您使用了duped密钥，因此为了测试它，您可以尝试跟踪$ index 这样

<table>
    <tr ng-repeat="x in records track by $index">
        <td>{{x}}</td>
    </tr>
</table>

[解决方案]

如果您仍想控制ng-repeat的交互，最好创建一个随时间推移而被操纵的动态变量，然后您可以拥有一个包含所有记录的主数组

$scope.records = [
    {
      "name": "name1",
      "data2": "data2.1",
      "data3": "data3.1"
    },
    {
      "name": "name2",
      "data2": "data2.2",
      "data3": "data3.2"
    },
    {
      "name": "name3",
      "data2": "data3.3",
      "data3": "data3.3"
    }
  ];

然后你可以使用setTimeout来调用一个函数，该函数将数据从主数组传递到另一个最终数组，每个交互的索引

//start to proccess 
  setTimeout(function(){$scope.Result();},1000);

//Here pass data from Records to FinalResult in each interaction
  $scope.Result=function(){
    dif=$scope.records.length-$scope.FinalResult.length;
    currentRow=$scope.FinalResult.length;
    if(dif>0){
      $scope.FinalResult.push($scope.records[currentRow]);
    }
    if($scope.records.length>$scope.FinalResult.length){
       setTimeout(function(){$scope.Result();},1000); 
    }else{
     console.log('Finish Load');
     $scope.FinishRender=true;
    }
    //refresh
    $scope.$apply();
  }

最后用另一个函数传递这个变量......

//get the finish Array
  $scope.getFinalResult=function(){
    return $scope.FinalResult;
  }

和HTML

<body>
    <div ng-controller="recordsCtrl">
      <table style="border:1px solid black">
        <tr ng-repeat="x in getFinalResult()">
            <td>{{x.name}}</td>
            <td>{{x.data2}}</td>
            <td>{{x.data3}}</td>
        </tr>
    </table>

    <div ng-if="FinishRender" style="color:red;font-weight:bold">Data Loaded!!!</div>
    </div>
  </body>

请随时查看punkler

中的解决方案

<强> [可选]

您也可以使用指令来控制上次交互，例如

myApp.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
          console.log(element);
            if (scope.$last === true) {
                        console.log('Finish Load');
            }
        }
    }
});

和html

<table>
    <tr ng-repeat="x in getFinalResult()" on-finish-render="onFinishRender">
       ....
       ...
    </tr>
</table>

注意：我不太确定，但我认为可以捕获与此方法的每次互动

ng重复延迟

2 个答案: